Выравнивание элементов в HTML. Абзацы в html и атрибут выравнивания

Здравствуйте, уважаемые читатели блога сайт. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

text-align: left|right|center|justify

Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

Примеры использования свойства:

p { text-align: justify }
h1 { text-align: center }

Следующее свойство CSS text-ident задает отступ для красной строки , например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

text-indent: <отступ>

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

p { text-ident: 10px; }

Далее рассмотрим вертикальное выравнивание — свойство vertical-align . Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|<величина>

Рассмотрим каждое значение подробнее:

  • baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
  • sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
  • super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
  • top — выравнивание фрагмента текста по верхнему краю родительского элемента;
  • text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
  • middle — выравнивание центра фрагмента текста по центру родительского элемента;
  • bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
  • text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

  • top — для выравнивания содержимого по верхней границе ячейки;
  • bottom — для выравнивания содержимого по нижней границе ячейки;
  • middle — для выравнивания по центру ячейки (используется по умолчанию).

Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег 

, помещенный в него текст отображается как есть, со всеми пробелами.


Свойство white-space имеет следующий синтаксис:


white-space: normal|pre|nowrap|pre-wrap|pre-line


Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.


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


Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега 
 позволит перенести текст на новую строку.


Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.


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


Пример использования:


p { white-space: pre; }


Далее рассмотрим параметр word-wrap
, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:


word-wrap: normal|break-word


Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:


p { word-wrap: break-word; }


Параметры тени у текста — свойство text-shadow


Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:


text-shadow: none | <цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]


Значение none отменяет добавление тени у текста и установлено по умолчанию.


Цвет тени
 задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.


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


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


В любой единице измерения задается и радиус размытия тени
. Чем больше это значение, тем шире становится тень и сильнее сглаживается. Если этот параметр не установлен, то значение размытие предполагается равным нулю. Так как алгоритм сглаживания обычно у разных браузеров отличается, то и вид тени может несколько отличаться в зависимости от браузера.


Рассмотрим пример:


p {

text-shadow: red 1px 1px 2px;

font-size: 2em;

}


И вот так будет выглядеть текст абзаца p с применением данного правила стиля в Internet Explorer 11:




На этом буду завершать статью. Чтобы узнать больше о свойствах CSS не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!


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


К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега . Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.


Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста, см. рис. 15.11.


В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. На рис. 5.11 показано, что Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorer


Рис. 5.11. Стандартное выравнивание внедренных изображений


Рис. 5.12. Internet Explorer и Firefox совмещают среднюю линию изображения со средней линией самого высокого элемента, а не средней линией текста


и Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым (рис. 5.12).


Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений: texttop, center, absmiddle, baseline и absbottom (кто не догадался об их смысле, поднимите руку):


Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.


Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему. Opera игнорирует выражение align=center.


Если вы присвоите атрибуту align тега  значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.


Рис. 5.13. При выравнивании изображений с атрибутом alingn=absbottom броузеры принимают во внимание нижние выносные элементы


bottom и baseline (принимаются по умолчанию)


Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии.1 (Если вы все еще держите руку поднятой, можете ее опустить.)


Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию (рис. 5.13).


Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом. В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.


До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег 

 я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.
 

 

 
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега 

:
 

 
Заголовок 1-го уровня, выравненный по центру


 
 
Это был тег 

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

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

. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега 

. А уже у этого тега есть атрибут "align
", значение которого и определяет положение данного контейнера. Бывают три значения: "left
", "center
", "right
". По умолчанию, стоит "left
", впрочем, думаю, что Вас это не удивляет.
Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю.
 

 


 
 
Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров.
Другой способ выравнивания элементов HTML
 - это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.
А пока Ваша страница должна выглядеть так:
 




 
Заголовок 1-го уровня, выравненный по центру


 


 
Заголовок 1-го уровня, выравненный по правому краю


 


 
С уважением, Михаил Русаков.
P.S.
 Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: 


Свойство CSS vertical-align
 отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.


Синтаксис CSS vertical-align



 
...
vertical-align
: value
;
...




  • baseline
 - выравнивание по базовой линии предка (или просто нижняя граница родителя)
    • 
 
  • bottom
 - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
    • 
 
  • middle
 - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
    • 
 
  • sub
 - отображение происходит под строкой (выглядит как подстрочный индекс)
    • 
 
  • super
 - отображение происходит над строкой (как верхний индекс)
    • 
 
  • text-bottom
 - выравнивание нижней границы элемента по нижнему краю строки
    • 
 
  • text-top
 - выравнивание верхняя границы элемента по верхнему краю строки
    • 
 
  • top
 - выравнивание верхняя края элемента по верху самого высокого элемента строки
    • 
 
  • inherit
 - наследует значение родителя
    • 
 
  • значение
 - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
    • 
 
  • проценты
 - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
    • 

Значение vertical-align
 по умолчанию:


  • baseline
 (для строчных элементов)
    • 
 
  • middle
 (для ячеек таблицы)
    • 

Вертикальное выравнивание в таблицах


Чаще всего vertical-align
 используется в ячейках таблиц. В теге 
 используют атрибут valign
.
Синтаксис CSS valign
 для таблиц

Где value
 может принимать следующие значения:
  • baseline
 - выравнивание по базовой линии первой текстовой строки
    • 
 
  • bottom
 - выравнивание по нижнему краю ячейки таблицы
    • 
 
  • middle
 - выравнивание по середине ячейки
    • 
 
  • top
 - выравнивание верхнему краю ячейки
    • 

Например:

 
 

или






 

 

 
 Выравнивание по верху

 
 

 

 
 Выравнивание по середине

 
 

 

 
 Выравнивание по низу

 
 







 Выравнивание по верху



 Выравнивание по середине



 Выравнивание по низу


Примеры с вертикальными выравниваниями


Пример 1. Значения vertical-align: baseline, bottom, top, sub

 





 
Текст с выравниванием vert_align_baseline

 
Текст с выравниванием vert_align_bottom

 
Текст с выравниванием vert_align_top

 
Текст с выравниванием vert_align_sub





 
Пример 2. Значения vertical-align: абсолютные значения и проценты


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

 





 

 

 

 






Преобразуется на странице в следующее:


Исходная строка. Текст с выравниванием на 10 пикселей вверх


Исходная строка. Текст с выравниванием на 5 пикселей вниз


Исходная строка. Текст с выравниванием на 50% вверх


Исходная строка. Текст с выравниванием на 30% вниз


Примечание


Значение vertical-align: middle
 не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).


Для обращения к vertical-align
 из JavaScript нужно писать следующую конструкцию:

 
object.style.verticalAlign
="VALUE
"



Описание

 
Выравнивание блока текста по краю.
Вместо этого атрибута необходимо использовать стили

 
Синтаксис

 
Значения

 left
 Выравнивание текста по левому краю. В этом случае строки текста выравнивается
 по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
 является наиболее популярным на сайтах, поскольку позволяет пользователю легко
 отыскивать взглядом новую строку и комфортно читать большой текст.
 center
 Выравнивание текста по центру. Текст помещается по центру горизонтали окна
 браузера или контейнера, где расположен текстовый блок. Строки текста словно
 нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
 способ выравнивания активно используется в заголовках и различных подписях,
 вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
 Во всех других случаях выравнивание по центру применяется редко по той причине,
 что читать большой объем такого текста неудобно.
 right
 Выравнивание текста по правому краю. Этот способ выравнивания выступает
 в роли антагониста предыдущему типу. А именно, строки текста равняются по
 правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
 а именно с него начинается чтение новых строк, такой текст читать труднее,
 чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
 краю применяется обычно для коротких заголовков объемом не более трех строк.
 Мы не рассматриваем специфичные сайты, где текст приходится читать справа
 налево, там возможно подобный способ выравнивания и пригодится. Но где вы
 у нас в стране видели такие сайты.
 justify
 Выравнивание по ширине, что означает одновременное выравнивание по левому
 и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
 пробелы между словами.
 
Значение по умолчанию

 
Пример. Выравнивание текста




 
 
 Тег P, атрибут align
 
 
 
Duis te feugifacilisi. Duis autem dolor in
 hendrerit in vulputate
 velit esse molestie consequat, vel illum dolore eu feugiat nulla
 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
 praesent luptatum zzril delenit au gue duis dolore te feugat nulla
 facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
 ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
 Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
 commodo consequat.

 



Браузеры: Настольные
 Мобильные
 ?



Internet Explorer

Chrome

Opera

Safari

Firefox



1

1

1

1

1



Android

Firefox Mobile

Opera Mobile

Safari Mobile



1

1

6

1



✖


Браузеры
В таблице браузеров применяются следующие обозначения.
  •  - элемент полностью поддерживается браузером;
  •  - элемент браузером не воспринимается и игнорируется;
  •  - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
    • 

Число указывает версию браузреа, начиная с которой элемент поддерживается.