Свойство 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 не делает.
Текст выравнивается при помощи атрибута 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;}
CSS-текст представляет набор свойств для форматирования текстового содержимого веб-страниц. Использование CSS-стилей для форматирования текста позволяет придать HTML-элементам желаемый вид, благодаря чему HTML-теги могут применяться только по своему прямому назначению — для определения структуры документа.
О свойствах для работы с текстом, добавленных в спецификацию CSS3 — text-overflow , word-break , word-wrap , можно прочитать .
Форматирование текста в CSS
1. Горизонтальное выравнивание text-align
Свойство выравнивает строки текста внутри блока по ширине относительно его границ. Применяется только к блочным элементам, например, абзацам. Наследуется.
Значения: | |
left | Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо. |
right | Выравнивание по правому краю элемента. |
center | Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента. |
justify | Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. |
initial | |
inherit |
Синтаксис
P {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}
Рис. 1. Свойство text-align
2. Отступ text-indent
Устанавливает отступ (выступ) в первой строке элемента, создавая иллюзию структурированного текста. Применяется к любому блочному элементу, значение по умолчанию 0. Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом. Наследуется.
Синтаксис
P {text-indent: 5px;}
p {text-indent: 2%;}
Рис. 2. Свойство text-indent
3. Высота строки line-height
Рис. 3. Контейнер строкиСвойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента. Управляет межстрочным интервалом — дополнительным расстоянием между строками над и под текстом. Чтобы определить межстрочный интервал, нужно найти разность line-height и font-size , разницу поделить на два, а каждую половину прибавить к области содержимого сверху и снизу. Принимает только положительные значения. Стандартный межстрочный интервал эквивалентен 120%.
При равных значениях line-height и height выравнивает текст по высоте. Наследуется.
Синтаксис
H1 {line-height: 20px;}
h1 {line-height: 200%;}
h1 {line-height: 1.2;}
h1 {line-height: normal;}
Рис. 4. Пример отображения различных значений межстрочного интервала
4. Вертикальное выравнивание vertical-align
Применяется только к строчным элементам, к изображениям и полям форм. Не выравнивает содержимое блочного элемента. Не наследуется.
vertical-align | |
---|---|
Значения: | |
baseline | Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента. |
sub | Делает элемент подстрочным (аналогично с тегом ). Величина понижения элемента может меняться в зависимости от браузера пользователя. |
super | Делает элемент надстрочным (аналогично с тегом ). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента. |
top | Верхний край элемента совмещается с верхним краем самого высокого элемента в линии. |
text-top | Верхний край элемента совмещается с верхним краем шрифта родительского элемента. |
middle | Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента. |
bottom | Нижний край элемента совмещается с нижним краем самого низкого элемента в линии. |
text-bottom | Нижний край элемента совмещается с нижним краем шрифта родительского элемента. |
длина | Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние. |
% | Не позволяет устанавливать middle , вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align , равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px . |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге , но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».
В общем в задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
На рисунке видно, что пункты выравниваться по ширине, примыкая к боковым стенкам и делая отступы между собой – равнозначными.
Как это работает?
По сути, мы должны получить то, что делает text-align: justify с текстом. Так как поведение наших блоков уж очень напоминает результат выравнивания слов в строке с помощью именно этого свойства. Думаю многие уже примерно представляют, что это за свойство и примерную его работу.* В этом обзоре я не стал постить разбор этапов всего алгоритма, об этом можно почитать в самой статье . Главное, чтобы вы понимали суть.
Наша задача
Наша задача состоит в том, чтобы построить решение на базе этого алгоритма. Применить, симулировать, заменить, сделать всё что угодно, главное в итоге получить то, что мы хотим. А именно – равномерно выровненные элементы в строке, боковые из которых прижаты к своим границам. Ну и конечно же расстояния (пробелы) между этих элементов должны быть абсолютно одинаковыми при любой ширине контейнера.* Сразу хочу сообщить, что вариантов (рабочих и не очень) на самом деле получилось целых 4 штуки, плюс ещё куча интересных и полезных разобранных нюансов, на огромную статью (в моём стиле). Поэтому тут я вкраце опишу некоторые из них:)
Варианты 3
А вот третий вариант уже построен на самом алгоритме text-align: justify и инлайн-блоках, которые и принесли свои плоды, но не совсем. Во-первых, мне пришлось разбавить список лишним, дополнительным элементом, а во-вторых, в IE6-7 обнаружились интересные факты, рыться в которых мне доставило большое удовольствие. В этих браузерех данное решение отказывалось работать вообще. И догадайтесь, кто пришёл мне на помощь. Верно, SelenIT2 ! Но он пришёл ни один, а с великолепной идеей (которую он нагло спёр у нашего общего коллеги по цеху GreatRash), от которой я был просто в шоке. Как оказалось, пара волшебных свойств CSS3 родом из глубокой древности может превратить это решение в кроссбраузерное и заставить работать text-align: justify в наших старичках IE6-7.Весь секрет оказался в последней строчке следующего кода:
ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Лекарство для IE6-7*/
text-justify: newspaper;
}
Как видно, с помощью text-justify: newspaper; у ul наш вариант становится кроссбраузерным. Это происходит за счёт того, что свойство text-justify: newspaper предназначено для увеличения или уменьшения интервалов между буквами и между словами. MSDN заявляет, что эта вещь «Самая навороченная форма выравнивания для латинского алфавита», а вот в этой статье ещё есть и дополнение, что для арабских текстов это свойство вытягивает и сами буквы.
Варианты 4
Ну, и вариант 4 стал отказом от дополнительной разметки, что повлекло за собой новые проблемы в IE6-7.Оказывается всё дело в том, что text-justify: newspaper лишь даёт возможность растягивать наши буквы (inline-block), но не команду. Проще говоря, он рассказывает строке, как бы он хотел, чтобы она была растянута, а text-align: justify является растягивающей силой. Т.е. text-align: justify отвечает за растяжение строки, а text-justify: newspaper лишь уточняет, как именно это растяжение будет происходить.
В обзоре 3-го варианта я сказал, что SelenIT2 подсказал мне два свойства, одно из которых (text-justify: newspaper) помогло нам в предыдущем варианте, а другое как раз помогло в этом! Причём в этот раз они объединились и уже с двойной силой смогли победить последний вариант.
ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Лекарство для IE6-7*/
text-justify: newspaper;
zoom:1;
/* Включаем в работу последнюю строку*/
text-align-last: justify;
}
Встречайте! text-align-last
- свойство, которое включает алгоритм text-align: justify в самой последней строке текста, если к ней применён этот самый text-align: justify . Проще говоря, когда мы применяем к тексту обычный text-align: justify , то, видя это, text-align-last указывает первому на то, что он поступает плохо и что ему придётся теперь работать и в последней строчке тоже.
Кстати, эти свойства специфицированы , а не какая-нибудь проприетарщина (кроме значения newspaper, которое теперь называется иначе). Так что ни один котенок не пострадает) И хочу подчеркнуть, что баг IE6-7 поборен с помощью CSS3 - кто еще когда такое видел? :)
В общем, подводя итоги обзора, хочу сказать, что рад, что мне удалось найти действительно достойное решение. Причём не просто найти, а разобраться во всём и довести его до абсолютной кроссбраузерности, затратив минимум кода и не засоряя разметки.
Если краткого обзора кому-то показалось мало, то я рекомендую прочитать вот эту (уже большую) статейку с доскональным разбором полётов. Но, предупреждаю! Статья действительно не маленькая, поэтому перед началом чтения лучше запастись вашими любимыми печеньками с чаем:)
Теги: Добавить метки
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
:
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю