Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах.
Один из самых простых и удобных тегов – CENTER предназначен для выравнивания блока текста. С помощью этого тега также можно центрировать рисунки и таблицы. Исключение составляют элементы или для которых выравнивание задается свойствами тега IMG. Так, если поместить элемент внутри тега CENTER, рисунок окажется выровненным по правому краю.
Пример 4.1. Центрирование с помощью тега CENTER
Данный текст будет выровнен по центру окна браузера, а нижележащий
рисунок по правому краю.
Формально CENTER должен использоваться только как параметр других блочных тегов (P, PRE и другие). Однако в браузере Netscape Navigator 2.0 CENTER был введен как самостоятельный тег. Это дополнение было призвано убрать лишний вертикальный отступ, который появляется при использовании блочных тегов. Если вместо тега CENTER текст поместить внутрь параграфа (
)
, появляется дополнительный вертикальный отступ между горизонтальной линией и этим текстом.
CENTER не входит в спецификацию HTML. В «официальном» HTML форматирование, такое как выравнивание текста должно производится через атрибуты тегов (например,
) или с использованием стилей. Тем не менее, этот тег обрел право на существование. Однако после опубликования спецификации HTML 4 W3 Консорциум рекомендовал воздержаться от использования тега CENTER, а вместо него использовать элемент
...
, как показано в примере 4.2.
Пример 4.2. Центрирование с помощью тега DIV
Выравнивание текста по центру с помощью тега DIV
Еще один способ центрирования заключается в использовании стилей. Стили представляют собой инструкции, которые позволяют управлять атрибутами форматирования как шрифт, цвет, выравнивание и др. Пример переопределения тега P для центрирования текста.
Пример 4.3. Центрирование с помощью стилей
Теперь, когда вы будете использовать тег P с вышеуказанным
стилем, текст параграфа будет выровнен по центру окна браузера
Свойство CSS text-align
отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.
Синтаксис CSS text-align
...
text-align
: center | justify | left | right | inherit
;
...
center
- выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
justify
- растягивание текста по всей ширине области
left
- выравнивание по левому краю
right
- выравнивание по правому краю
inherit
- принять значение предка (родителя)
Чаще всего эти свойства применяются в блоках
и абзацах
Примечание:
Есть также свойство vertical-align , которое отвечает за вертикальное выравнивание.
Как сделать выравнивание текста в html
Пример №1.
Выравнивание текста по левому краю. Действуют по умолчанию.
Выравнивание текста по левому краю
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
Выравнивание текста по центру
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
Выравнивание текста по правому краю
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify;
может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
Примечание
Вместо свойства text-align
можно также использовать атрибут align
, который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание по центру
Выравнивание текста по ширине всей области
...
...
Разница в тегах
и
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
Когда Вы печатаете текст в программе Microsoft Word, он печатается по левому краю. Но довольно часто требуется сместить его в другую сторону.
Например, заголовок принято смещать в центр страницы, а чтобы напечатать шапку документа, зачастую нужно сместить текст вправо. Эта процедура называется выравнивание.
— это то, как текст расположен на странице. Он может быть расположен по центру, по левому и правому краю, по ширине. Для этого в программе Word есть специальные кнопки вверху:
О них мы поговорим чуть позже. А пока несколько слов о том, как не нужно
выравнивать текст.
Неправильное выравнивание текста
Многие люди по незнанию выравнивают текст неправильно - при помощи кнопки пробел на клавиатуре или кнопки Tab.
Такое смещение считается ошибкой, так как расстояние от левого поля делается на «глазок». Из-за этого оно чаще всего больше, чем нужно. А если Вы таким образом выровняете текст по правому краю, то возникнет масса проблем при его редактировании. Да и сам способ весьма неудобный - приходится много раз нажимать кнопку пробел или Tab на клавиатуре.
Чем это грозит? Например, потеряй деловой репутации. Ведь можно очень быстро проверить оформление текста. Для этого достаточно нажать вот на эту кнопку вверху программы Microsoft Word:
В тексте появятся точки и непонятные значки. Вот точками показываются пробелы. И если Вы неправильно выровняете текст, при такой проверке это сразу же будет видно по множеству точек перед ним.
Чтобы вернуть все обратно - убрать точки и непонятные значки, - еще раз нажмите на кнопку
Между прочим, документ с неправильным выравниванием могут не принять в некоторых организациях.
Как выровнять текст
А сейчас научимся правильно выравнивать текст. Кстати, сделать это можно уже после того, как текст напечатан. Рекомендую именно так и поступать - это и проще, и быстрее.
Для смещения текста в программе Word есть четыре кнопки. Находятся они вверху.
— эта кнопка выравнивает текст по левому краю
— вот эта выравнивает по центру
— по правому краю
— по ширине (делает текст ровным с двух сторон)
А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их. Для этого наведите курсор (стрелку или палочку) в самое начало или в самый конец текста. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в другой конец. Когда текст закрасится другим цветом (обычно черным или синим), это будет означать, что он выделен.
После выделения нажмите по кнопке, которая выравнивает текст по центру. Напечатанные Вами слова должны сместиться в середину страницы.
Вам может показаться, что это неправильный центр. На самом деле, все верно. Ведь поле (отступ) с левой стороны больше, чем с правой.
Таким же способом попробуйте выровнять текст по правому краю.
Что касается кнопки «По ширине». Если у Вас немного текста (пару слов), то Вы не увидите отличий от кнопки «По левому краю» - слова так же сместятся влево. А вот если у Вас несколько абзацев, то текст выровняется по двум сторонам листа - и по левой, и по правой. То есть он будет ровным с двух сторон.
Пример текста, выровненного по левому краю:
Тот же текст, только выровненный по ширине:
Кстати, по правилам оформления документов, основной текст должен быть выровнен именно по ширине.
Текст выравнивается при помощи атрибута 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
Золотое кольцо России
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом
. Пришло время разобраться с тем, как выравнивать текст на странице HTML
. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег
. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами
:
Выравнивание элементов в HTML
Текст с левой стороны
Центральный текст
После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег
- значит должны быть и теги
, и
. Заключив содержимое в теги
вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег
, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега
он просто его пропустил. Тегов
и
не существует.
Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера
, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
Элемент
является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры
. У тега
есть атрибут align
, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left
, center
, right
. Давайте напишем код, где расположим элементы в различных частях браузера:
Выравнивание элементов в HTML
Текст, расположенный слева
Текст, расположенный по центру
Текст, расположенный справа
В данной статье вы научились выравнивать текст на html-странице
.
