Выравнивание посередине html. Выравнивание текста в CSS: свойство text-align. Приемы для устранения больших пробелов

Инструкция

Запустите программу Microsoft Word (версии до 2007 года), откройте нужный документ с помощью команды «Файл» – «Открыть», в появившемся окне выберите папку, в которой находится нужный файл, выделите его и щелкните «Открыть». Далее выделите фрагмент текста, к которому необходимо применить форматирование по ширине. Либо установите курсор в строке/абзаце.

Далее выберите команду «Формат» – «Абзац». Также данную опцию вы можете вызвать с помощью контекстного меню на нужном фрагменте текста. Возле пункта «Выравнивание» щелкните по стрелке и из выпадающего списка выберите пункт «По ширине». Щелкните «ОК». Таким образом, вам удалось выровнять текст по ширине.

Выделите текст либо установите курсор в строке, которую нужно отформатировать по ширине. Выберите на панели инструментов «Форматирование» кнопку с изображением горизонтальных линий, «По ширине», щелкните по ней. Выбранный текст будет отформатирован. Чтобы выполнить аналогичное действие в версии Microsoft Word 2007 года и более поздних, выделите текст, на панели инструментов выберите вкладку «Главная».

В разделе «Абзац» выберите кнопку выравнивания по ширине. Либо щелкните по тексту правой кнопкой мыши и установите выравнивание в самом контекстном меню. Аналогично выставить текст по ширине можно произвести в текстовом редакторе Open Office Writer и приложении Word Pad (в версиях, установленных в операционной системе Windows 7, в более ранних версиях программы данная опция не поддерживается).

Выполните выравнивание текста по ширине в веб-странице. Перейдите в папку с html-документом, вызовите на нем контекстное меню, выберите из него команду «Открыть с помощью», выберите «Блокнот». Найдите в коде страницы соответствующий фрагмент текста. Далее выполите для него установку выравнивания по ширине.

Для этого заключите нужный текст в тег абзаца, применив к нему параметр расположения по ширине Justify. Например, чтобы выровнять по ширине текст абзаца, в начале абзаца установите тег далее вставьте нужный текст, после этого добавьте закрывающий тег абзаца.

Порой при оформлении документов возникает необходимость в расположении текста таким образом, чтобы визуально заполнить максимум пространства листа при сохранении объема написанного. Для того чтобы растянуть текст в Word, в помощь пользователю выступает целый арсенал средств форматирования.

Инструкция

Первый способ растянуть в Word – уменьшить с обеих сторон. Речь идет о ширине . Чтобы расширить границы текста, передвиньте соответствующие бегунки вверху на линейке, показывающей ширину рабочей . При наведении на них мышкой вы увидите всплывающие подсказки:
Отступ первой строки;
Отступ слева;
Отступ справа.

Второй способ растянуть текст в Word – расширить межстрочный интервал. Для этого выделите весь текст или его часть, нажмите на него правой кнопкой мыши и в выпадающем меню выберите команду «Абзац». В центре нового окна настроек вы увидите поле «Интервал». Заполните значения специальных полей, и текст в документе растянется по странице. В этом же окне настроек можно указать и величины отступа текста, если по каким-то причинам передвижение бегунков по линейке не дало желаемого результата.

Третий способ растянуть текст в Word – произвести форматирование самого шрифта таким образом, чтобы он стал шире при сохранении прежнего размера. Для этого выделите текст, который нужно растянуть, через правую кнопку мыши раскройте выпадающий список команд и перейдите в параметр «Шрифт». В появившемся окне откройте вкладку «Интервал». В параметре с таким же названием выберите «Разреженный» и, если нужно, в поле рядом поставьте конкретное значение разреженности. Нажмите ОК.

Источники:

  • Форматирование текста в Word

Уменьшение интервала между словами может быть вызвано несколькими причинами - использованием нескольких пробелов вместо одного, знаков табуляции вместо пробелов, форматированием текста «по ширине» и т.д. Процедуры устранения этих причин будут различаться в зависимости от формата документа, в котором хранится исходный текст.

Инструкция

Если , расстояние между словами в котором надо уменьшить, хранится в файле с расширением txt, то откройте его в любом текстовом редакторе. Этот формат не предусматривает использования команд форматирования, поэтому слишком большие интервалы между словами могут быть вызваны использованием нескольких знаков пробела или знаков табуляции вместо одного пробела. В этом случае процедура уменьшения расстояния между словами будет сведена к поиску и замене всех двойных пробелов и знаков табуляции пробелами одинарными. Диалог поиска и замены обычно при нажатии сочетания клавиш CTRL + H или CTRL + R (в зависимости от настроек используемого редактора). Нажмите их или выберите соответствующий пункт в меню.

Введите в поле поиска знак табуляции. Например, в текстовом редакторе Microsoft Word это можно сделать, сначала щелкнув кнопку «Больше», потом кнопку «Специальный» и выбрав в выпавшем списке строку «Знак табуляции». В более простых редакторах (например, в Блокноте) проще скопировать знак табуляции в и вставить его в поле поиска. В поле замены введите один пробел. Нажмите кнопку «Заменить все» и редактор поменяет знаки табуляции между словами одинарными пробелами. Это первая часть процедуры.

Откройте снова диалог поиска и замены, в поле «Найти» введите два пробела, а в поле «Заменить на» - один. Нажмите кнопку «Заменить все». Возможно, такую замену надо будет осуществлять несколько раз - делайте это до тех пор, пока редактор будет находить пробелы . Это будет вторая и заключительная часть процедуры уменьшения интервалов между словами в неформатированном тексте.

Если же формат файла поддерживает возможности выравнивания текста (например, doc, docx и др.), то причиной слишком большого разрыва между словами могут стать еще и использованные команды форматирования. Для устранения этой причины файл надо открыть в редакторе, имеющем соответствующие функции - например, Microsoft Word вполне подойдет. Загрузив текст, выделите его весь или только тот блок, который нуждается и замене интервалов, и нажмите сочетание клавиш CTRL + L. Таким способом вы замените выравнивание «по ширине» выравниванием «по левому краю».

Если проблемный текст является частью веб-документа (htm, html, php и др.), то вероятных причин дефекта будет три. Начните с замены во всем тексте документа неразрывных пробелов (& nbsp; без пробела после &) пробелами обычными. Затем поищите в исходнике страницы и подключаемых файлах стилей (расширение - css) выравнивание по ширине (justify) и замените его выравниванием по левому краю (left). И, наконец, поищите там же свойство word-spacing. Если оно есть, то удалите его вместе с присвоенным значением - так вы вернете интервал между словами к его значению по умолчанию.

Каждый пользователь ПК наверняка знаком с программой Microsoft Office Word и, конечно же, не раз сталкивался с необходимостью форматирования текста. Все мы знаем, как это непросто, в особенности, если текст был взят из интернета.

Вам понадобится

  • компьютер, Microsoft Office Word

Инструкция

Чтобы легко справляться с форматированием текстов в программе Word, вам достаточно использовать в работе несколько "проверенных" приемов. Чтобы выровнять текст по ширине, по левому или по правому краям, выделите документ частично или полностью. Выберите необходимый вариант выравнивания на панели инструментов (каждая кнопка имеет соответствующий ). Это же действие можно выполнить с помощью только клавиатуры благодаря различным комбинациям клавиш. Для выравнивания текста по ширине используйте сочетание Ctrl+J, для выравнивания по левому краю - Ctrl+L, для выравнивания по правой стороне - Ctrl+R, для выравнивания по центру - Ctrl+E.

Если у вас установлен Microsoft Office Word 2007 года, выберите вкладку «Главная», расположенную вверху окна и перейдите на «Стили» (там будет надпись «Очистить формат»). Таким образом, вы удалите исходное форматирование документа и сможете создать свое.

Иногда, даже набирая текст в программе Word собственноручно, вы можете столкнуться с трудностями при выравнивании элементов. Это из-за того, что множество символов не отображаются на мониторе и остаются для автора документа невидимыми (это может быть пробел, перенос и т.д.). Для того чтобы избавиться от лишних скрытых элементов, в меню файла необходимо выбрать пункт «Главная» и нажать строчку «отобразить все знаки». После этого в рабочем файле отобразятся все пробелы, переносы и т.д. Удалив часть из них, вы легко сможете выполнить форматирование электронного документа.

Иногда кнопка отображения знаков вынесена в основную панель инструментов и выглядит как значок "Пи". Для того чтобы отключить эту функцию, необходимо заново повторить предыдущее действие.

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Пример записи стиля:

P { text-align: left; }

Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине (justify) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .

На скриншотах показаны примеры использования различных значений для свойства CSS text-align:

Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left.
Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right.
Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо.
Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией).
Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.

Windows : Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx и 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .

Linux : Firefox 1.0+, Chromium, Opera 5.0 - 6.xx и 9.0+, SeaMonkey 1.0+ [ 2 ] .

Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью HTML - без CSS. Контейнер, в котором будет находится содержимое веб-страницы выравнивается по центру - по ширине и по высоте: [ Открыть страницу-пример ].

А так же в Netscape 2.02 - 4.80 и Offbyone. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.

А так же в Netscape 2.02 - 4.80. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.

Aliosque subditos et thema

CSS только для браузера Firefox: В Firefox этот текст красного цвета HTML / XHTML. Код:

В Firefox этот текст красного цвета

CSS. Код: @-moz-document url-prefix() {p {color: #f00;}} В отличии от способа применения CSS только для Opera, по существу является хаком - поскольку правило изначально предназначалось для другой цели. Однако отсутствие поддержки в других браузерах позволяет изолировать код для использования только веб браузером Firefox. [ 1 ] Другие браузеры с движком Gecko, как SeaMonkey 1.0+ или более старый Netscape 9.0, так же поддерживают данный CSS хак. [ 2 ] Разные версии Internet Explorer, Google Chrome, Opera, Safari реагируют на хак так, как им и полагается - эти браузеры игнорируют весь код хака. [ 3 ] Есть еще один браузер, где текст становится красным - ELinks, текстовый веб браузер с некоторой поддержкой CSS.

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример: Вертикальное выравнивание CSS Вертикальное выравнивание CSS HTML / XHTML. Код:

Вертикальное выравнивание CSS
Вертикальное выравнивание CSS
CSS. Код: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Примечание: .parent и.childcontent могут быть выровнены по левому краю ("float: left;") или не выровнены, но чтобы этот способ вертикального выравнивания CSS сработал, .child должен быть без "float: left;". [ 1 ] А так же в Netscape 6.01+, Mozilla 0.6+. [ 2 ] А так же в Netscape 6.01+, Mozilla 0.6+.

Текст выравнивается при помощи атрибута CSS text-align , который может принимать следующие значения:

  • center - по центру
  • justify - по ширине
  • left - по левому краю
  • right - по правому краю

Атрибут text-indent задает отступ "красной строки" - первой строки нового абзаца.

Для форматирования текста используют еще такие атрибуты:

  • line-height - высота строки. Возможные значения:
    • n px,pt,ex,em,in,mm,cm,pc
    • n %
  • margin - отступ от внешнего края элемента до внутреннего края родительского элемента. Возможны варианты (margin-top; margin-left; margin-bottom; margin-right). Значения:
    • n px,pt,ex,em,in,mm,cm,pc
    • n %
  • padding - отступ от внутреннего края элемента до его содержимого. Возможны варианты (padding-top; padding-left; padding-bottom; padding-right). Значения:
    • n px,pt,ex,em,in,mm,cm,pc
    • n %
  • vertical-align - вертикальное выравнивание (актуально для таблиц). Значения:
    • top - выравнивание по верхней части
    • middle - выравнивание по середине
    • bottom - выравнивание по нижней части
    • text-top - выравнивание по верхнему краю текста
    • text-bottom - выравнивание по нижнему краю текста
  • white-space - способ отделения слов друг от друга
    • normal
    • nowrap (переносы строк игнорируются)

Ниже представлено несколько примеров выравнивания текста, с которыми разобраться не составит особого труда. Для лучшего понимания работы атрибутов выравнивания текста, попробуйте самостоятельно отформатировать несколько абзацев.


Пример выравнивания текста: Пример №6

HTML-код страницы :


Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Еще три мощных атрибута для форматирования текста:

  • line-height - определяет межстрочный интервал. Значение должно быть больше высоты шрифта, в противном случае значение автоматически подгоняется под высоту текста. Значения:
    • n px,pt,ex,em,in,mm,cm,pc
    • n %
  • word-spacing - интервал между словами. Значения:
    • n px,pt,ex,em,in,mm,cm,pc
  • letter-spacing - интервал между буквами. Значения:
    • n px,pt,ex,em,in,mm,cm,pc

Пример форматирования текста: Пример №7

HTML-код страницы :


Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Теперь полученные знания применим во внешнем листе стилей, отформатировав тег абзаца:


Пример форматирования текста внешним листом стилей: Пример №8

HTML-код страницы :


Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

CSS файл :


body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;} H1 {color: green; font-size: 130%;} p {text-indent: 15px; font-size: 10pt; line-height: 150%; text-align: justify; letter-spacing: 7px;}

Разнообразие инструментов для стилистического оформления документов в текстовом редакторе Microsoft Word очень часто мешает начинающим пользователям. Используемое форматирование начинает конфликтовать друг с другом, полученные результаты отличаются от ожидаемых в результате чего пользователи начинают сомневаться даже в самых простых вопросах, например таком – как выровнять текст в Ворде.

Рассмотрим возможные варианты выравнивания текста в Ворде и инструменты, которые используются для этого.

Кнопки для выравнивания текста в Word 2007

В новом интерфейсе Ворда, который начал использоваться с момента выхода комплекта офисных программ Microsoft Office 2007, кнопки для выравнивая текста можно найти в группе Абзац раздела Главная основного меню. Можно увидеть четыре кнопки, предлагающие различные варианты выравнивания текста:

по левому краю;
по центру;
по правому краю;
по ширине.

Чтобы применить указанные способы выравнивания к какому-либо участку или всему тексту его необходимо предварительно выделить. После этого можно устанавливать различные виды выравнивания текста нажатием перечисленных выше кнопок.

Для того, чтобы увидеть как выглядят различные варианты выравнивания в тексте ознакомьтесь со следующими изображениями.
Наиболее часто используется выравнивание по ширине и очень редко по правому краю. Выравнивание по ширине имеет один очень важный нюанс, который отличает его от других способов. В тексте оно обеспечивается за счет изменения величины пробела между словами. В тех случаях, когда в предложениях следуют подряд друг за другом несколько длинных слов, пробелы могут увеличиваться до неприемлемых значений.

Чтобы этого избежать рекомендуется всегда при использовании выравнивания по ширине включать переносы в словах. Сделать это можно с помощью одноименного инструмента Расстановка переносов раздела Разметка страницы главного меню редактора.


Ну а чтобы избежать возможных проблем с некорректным выравнивание текстов рекомендуем во всем документе придерживаться единства выбранного стиля, а комбинации различных видов выравнивание использовать только в исключительных случаях.