Css свойство vertical-align

Как выровнять текст по центру при помощи CSS?

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

• text-align: center; — для выравнивания по центру
• text-align: left; — по левой стороне
• text-align: right; — по правой стороне
• text-align: justify; — по ширине блока или страницы.

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

1. 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

   PHP

   <div class=”block-text”>Здесь текст</div>

   1	<div class=”block-text”>Здесьтекст<div>

   А затем в CSS файле вашего сайта пишем:

   PHP

   .block-text {
   text-align: center;
   }

   1 2 3

   .block-text{ text-aligncenter; }

   Вместо block-text может быть любое другое название класса.

   Также можно не присваивать новый класс, а использовать уже существующий. В этой статье с видео инструкцией я показывала как определить класс или идентификатор элемента на сайте: “Как определить ID и класс элемента на странице?”

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

   PHP

   .block p {
   text-align: center;
   }

   1 2 3

   .blockp{ text-aligncenter; }

   В этом случае выравнивание текста по центру применится для всех тегов

   , которые находятся внутри тега с классом block:

   PHP

   <div class=”block”>
   <p>Первый абзац</p>
   <p>Второй абзац</p>
   ….
   </div>

   1 2 3 4 5

   <div class=”block”> <p>Первыйабзац<p> <p>Второйабзац<p> …. <div>

   Для выравнивания заголовков внутри блока с классом block запись будет немного другая:

   PHP

   .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 {
   text-align: center;
   }

   1 2 3

   .block h1,.block h2,.block h3,.block h4,.block h5,.block h6{ text-aligncenter; }

   Так же вы можете задать эти CSS свойства в HTML коде страницы или подключить свой отдельный CSS файл. Как это сделать написано в этой статье:«Как css подключить к html?»

2. 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:

   PHP

   <p style=” text-align: center;”>Пример текста</p>

   1	<pstyle=”text-aligncenter;”>Примертекста<p>

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

Описанные выше способы помогут вам выровнять по центру текст. Так же вам могут понадобиться вот эти материалы:«Как выровнять текст или блок по вертикали в CSS?»«Выравнивание картинки по центру HTML и CSS»

На этом у меня всё! Спасибо что посетили мой сайт! Буду очень рада видеть ваши комментарии! Успехов вам и процветания!

С уважением Юлия Гусарь

Text-transform, letter-spacing, word-spacing и white-space

Дальше у нас на очереди text-transform — трансформация символов. Оно так же применяется к любым Html элементам (и блочным, и строчным) и может иметь всего четыре значения:

None используется по умолчанию и означает, что символы в тексте изменяться никак не будут — как написано в Html, так и будут отображаться. Значение Uppercase для text-transform позволит трансформировать все буквы фрагмента в заглавные (пример показан в этом предложении, где использовалось правило text-transform:uppercase, а изначально буквы были написаны строчные).

Значение lowercase для Css правила text-transform позволит вам трансформировать все символы фрагмента в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными (пример в этом предложении — text-transform:capitalize). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом запросто все вернуть обратно.

Поэтому, если у вас, например, стоит задача сделать все заголовки написанными только заглавными буквами, то в Html пишите их обычно, а заглавными их сделаете уже в CSS через text-transform:uppercase. Потом, если вы решите что-то поменять назад, то достаточно внести только маленькое изменение в стили, а не в содержимое всех 100500 заголовков на вашем сайте.

Дальше давайте рассмотрим CSS правила, которые позволят нам изменять расстояния между символами и словами — letter-spacing и word-spacing. Оба эти правила могут иметь два типа значений:

По умолчанию и letter-spacing, и word-spacing имеют значение Normal, ну или это тоже самое, что ноль (т.е. расстояние между символами и словами никак не изменяется). Величину же изменения расстояния в этих правилах можно будет указывать только в пикселах, либо Em или Ex, но никак не в процентах.

Однако, можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов). Например, можно «вот так разредить символы в этой фразе» с помощью следующего Css правила:

letter-spacing:0.4em;

Или же можно «вот так сблизить символы в этой фразе» с помощью:

letter-spacing:-1px;

Тоже самое можно сказать и про word-spacing с одной лишь только разницей, что при этом расстояние будет изменяться уже между словами, как, например, в этой фразе, при помощи вот такой вот CSS конструкции:

word-spacing:4em;

Аналогично можно использовать в word-spacing отрицательные значения для уменьшения расстояния между словами.

Ну, и последнее на сегодня Css правило, которое позволяет определенным образом оформлять текст в Html коде — это white-space. Отвечает оно за отображение пробельных символов на веб странице, которые имели место быть при написании Html кода.

Как вы помните из статьи про символы пробела в Html, браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел, и осуществляет перенос строк на веб странице именно по пробельным символам, которые имели место быть в коде.

Так вот, white space может принимать одно из трех значений:

Понятно, что по умолчанию используется значение Normal и в этом случае все отображается так, как я описал чуть выше. А вот при использовании значения Pre мы получим полную аналогию с использованием , т.е. на вебстранице текст будет отображен со всеми теми лишними пробельными символами, которые имели место быть при написании кода и переносы браузер уже по ним сделать не сможет.

Ну, а значение nowrap просто запретит браузеру переносить по тем пробельным символам, которые он найдет внутри фрагмента с CSS правилом white-space:nowrap. Попробовать, как все это работает, вы сможете и сами, создав простенький Html файлик и заключив любой фрагмент текста в подобные теги:

<div style="white-space:pre;">фрагмент подопытного текста</div>

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Property Values

Value	Description	Play it
baseline	The element is aligned with the baseline of the parent. This is default	Play it »
length	Raises or lower an element by the specified length. Negative values are allowed. Read about length units	Play it »
%	Raises or lower an element in a percent of the «line-height» property. Negative values are allowed	Play it »
sub	The element is aligned with the subscript baseline of the parent	Play it »
super	The element is aligned with the superscript baseline of the parent	Play it »
top	The element is aligned with the top of the tallest element on the line	Play it »
text-top	The element is aligned with the top of the parent element’s font	Play it »
middle	The element is placed in the middle of the parent element	Play it »
bottom	The element is aligned with the lowest element on the line	Play it »
text-bottom	The element is aligned with the bottom of the parent element’s font	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Вертикальное выравнивание строчных элементов.

В CSS есть такое свойство, называется vertical align. И я думаю, вы не первый раз слышите об этом. Простейшее использование выглядит так:

Обратите внимание, что в этом случае использования, свойство применяется к элементу img. Поскольку изображения являются строчными элементами, то располагаются они в строке, как если бы они были простым текстом

Но что именно значит «располагаются в строке»? Вот именно здесь появляется понятие «вертикальное выравнивание».

Атрибут может принимать следующие значения: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, или значение в процентах..

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

Baseline

Значением по умолчанию для vertical-align является baseline. Изображения будут находиться на одной линии с текстом

Обратите внимание, что выступающие элементы символов, выступают за базовую линию. Картинки не выравниваются по этим выступам, поскольку это не базовая линия

Middle

Возможно, наиболее используемое значение для vertical-align — это «middle» для изображений-иконок. Результат получается довольно кросс-браузерным.

Браузер центрирует высоту текста в пикселях с высотой картинки, опять же, в пикселях:

Необходимо запомнить, если изображение больше чем текущий размер шрифта и высота строки, то оно будет «вытолкнуто» вниз, если это необхоимо.

Text-bottom

Отличается от baseline тем, что изображение выравнивается по нижней линии текста (не базовая линия, а по линии выступающих частей текста). Картинки могут быть выравнены по этой линии таким образом:

Text-top

Противоположностью значения text-bottom является text-top. Самая высокая точка строки текста при текущем размере шрифта. Таким образом вы можете выровнять изображение по этой линии

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

Top и Bottom

Top и Bottom работаю подобно свойствам text-top и text-bottom, но при выравнивании расчёт происходит не по высоте текущего текста, а по высоте максимального элемента в строке (например другой картинки). И при расопложении учитывается именно его верх (или низ).

Sub и Super

Эти значения используются для верхних (superscript) и нижних (subscript) индексов. При использовании этих значений, элементы выстраиваются таким образом:

Vertical Align on Table Cells

В отличии от картинок, у таблиц по умолчанию используется выравнивание по центру (middle).

topbottomvertical-alignment

Для вертикального выравнивания в ячейках таблицы, лучше всего использовать только эти значения (top, middle, bottom). Использование других значений может привести к непредсказуемым результатам в разных броузерах. Например, text-bottom прижимает текст к низу в IE 6, а в Safari 4 — к верху. Установка значения sub выравнивает по центру в IE 6, а в Safari 4, опять же, по верхней линии.

Vertical Align и элементы Inline-Block

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

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

Атрибут «valign»

Иногда вы можете встретить атрибут «valign» для вертикального выравнивания в ячейках таблицы (например, <td valign=top>. Стоит отметить, что этот атрибут является устаревшим и не должен использоваться. Да и зачем, если вы можете добиться желаемого, используя CSS.

Центровка в блоке переменной высоты

Очень часто встречается необходимость задать высоту блока класса textalign не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.

Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell).

В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table и уже для него задавать процентное значение высоты.  Тогда вложенный в него блок, с CSS-директивой display:table-cell, благополучно унаследует высоту родительского блока.

Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:

Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle. Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.

Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:

.textalign{
    display: table;
    width:500px;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell, тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle.

Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign.

.textalign div{
    display: table-cell;
    vertical-align: middle;
}

Вот и вся хитрость. При желании, вы можете посмотреть на сверстанный блок переменной высоты с отцентрованным содержимым.

Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить тут.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

CSS:

#parent {display: table;}
#child {
	display: table-cell;
	vertical-align: middle;
}

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

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Как выровнять в html текст по центру?

В HTML есть два варианта, которые не предполагают использование CSS.

1. 1.Тег <center>
   Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
   • текст,
   • картинки,
   • ссылки,
   • а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.

   PHP

   <center>
   Текст, который нужно выровнять по центру.
   </center>

   1 2 3

   <center> Текст,которыйнужновыровнятьпоцентру. <center>

2. 2.Использование HTML атрибута align cо значением center.
   Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
   Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.

   PHP

   <h2 align=»center»>Выравнивание текста по центру при помощи HTML</h2></li>

   1	<h2 align=»center»>ВыравниваниетекстапоцентруприпомощиHTML<h2><li>

Если у вас не срабатывает выравнивание заданное при помощи HTML, то, скорее всего, для этого блока уже задано выравнивание в CSS.

Так же атрибут align имеет и другие значения:

• align=’»left’ — выравнивание текста по левому краю
• align=’right’ – выравнивание по правому краю
• align=’justify’ – выравнивание текста по ширине

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет. 

.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Смещение колонок и контейнеров

Данный метод более сложен для понимания, чем остальные.

HTML

<div id="container-outer">
	<div id="container-inner">
		<div id="sidebar">
			<p>Боковая панель</p>
		</div>
		<div id="content">
			<p>Основное содержание</p>
		</div>
	</div>
</div>

В разметке добавляется дополнительный элемент

CSS

Код CSS для данного метода более сложный, чем для выше описанных способов выравнивания. Для обоих элементов #sidebar и #content задаются свойства смещения влево и ширина, а также кое-что дополнительно.

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

#container-outer {
	float:left;
	overflow: hidden;
	background: #eee;
}
#container-inner {
	float:left;
	background: #555;
	position: relative;
	right:75%;
}
#sidebar {
	float: left;
	width: 25%;
	position: relative;
	left: 75%;
}
#content {
	float: left;
	width: 75%;
	position: relative;
	left: 75%
}

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

Затем устанавливаем фон для двух контейнеров . Внутренний контейнер имеет фон боковой панели, в внешний — фон основного содержания.

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

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

#container-inner {
	position: relative;
	right: 75%;
}

Для позиционирования внутреннего контейнера устанавливаем для его свойства right значение 75%, что равно ширине колонки основного содержания.

Теперь фоны располагаются на своих местах. Однако содержание обеих колонок сдвинуто на 75% влево. Нужно вернуть его обратно на место.

#sidebar {
    position: relative;
    left:75%
}
#content {
    position: relative;
    left:75%
}

Устанавливаем относительное позиционирование и значение свойства left равным 75%, чтобы сдвинуть все вправо.

Плюсы:

• Метод работает вне зависимости от ширины колонок
• Метод работает в любых шаблонах.
• Можно формировать сколько угодно колонок.

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

text-align:justify;

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

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).

Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что…).

Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.

Примеры

Давайте рассмотрим работу свойства vertical-align на нескольких примерах. Присвоим разные значения строчно-блочным элементам.

Для начала посмотрим работу этого свойства со значением baseline, используемым по умолчанию.

В примере создадим контейнер #container, внутри которого будем размещать наши строчно-блочные элементы #small и #big для экспериментов.

Вот результат работы этого кода:

текст
у

Границы строчно-блочных элементов выделены красным цветом.

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

Теперь поменяем значение свойства vertical-align на bottom:

текст
у

Теперь нижние границы всех элементов выстроены в одну линию

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

Далее, поменяем значение свойства vertical-align на middle:

текст
у

Теперь элементы в строке выровнены по центру.

Ну и последний пример, поменяем значение свойства vertical-align на top:

текст
у

Имеем ожидаемый результат: строчно-блочные элементы размещены по верхнему краю строки.

Задача посложнее

Давайте теперь решим такую задачу: нам нужно в этом контейнере разместить текст по центру вертикали контейнера #container.

Ключ решения такой задачи следующий: нужно высоту строки сделать равной высоте блока. Высоту строки можно задать с помощью свойства line-height.

Высота нашего контейнера height: 100px. Только тут нужно учитывать то, что у нашего контейнера уже есть padding: 2px, который накладывается с margin: 2px строчно-блочных элементов, но у них есть border: 1px, который также нужно учесть.

То есть, корректная высота строки line-height будет равна: height: 100px минус (padding: 2px + border: 1px) *2 (так как нужно учитывать верх и них) = 94px.

Итак, код:

Результат:

текст
у

Лишний элемент

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

CSS

.parent:before{
display:inline-block;
height:100%;
vertical-align:middle;
content:»»;
}
.child{
display:inline-block;
vertical-align:middle;
}

1 2 3 4 5 6 7 8 9 10 11 12

.parent:before{ displayinline-block; height100%; vertical-alignmiddle; content»»; } .child{ displayinline-block; vertical-alignmiddle; }

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

Выравнивание текста

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

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

Значение	Описание
left	Выравнивает текст влево. Это значение по умолчанию (если направление текста слева направо).
right	Выравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево).
center	Выравнивает текст по центру.
justify	Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине).

Давайте рассмотрим пример работы с выравниванием текста:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-align</title>
<style> 
div {
background-color : rgba(0, 255, 0, .1); /* задаём цвет заднего фона для всех элементов <div> */
}
.test {
text-align : left; /* задаём выравнивание текста влево */
}
.test2 {
text-align : center; /* задаём выравнивание текста по центру */
}
.test3 {
text-align : right; /* задаём выравнивание текста вправо */
}
.test4 {
text-align : justify; /* задаём выравнивание текста по ширине */
}
</style>
</head>
<body>
	<div class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test4">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов <div> мы установили цвет заднего фона rgba(0, 255, 0, .1).

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Выравнивание по вертикали в div-контейнере

Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align. Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:

Пусть у нас есть div класса textalign:

<div class=»textalign»>Содержимое блока</div>

Для данного блока указываем следующее CSS-свойство:

.textalign{
    display: table-cell;
}

Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

• Способ с применением дополнительного вспомогательного div-котнейнера
• Способ с использованием expression-а. Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
• Использование свойства line-height. Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
• Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

Заключение