Выравнивание по горизонтали и вертикали в CSS

css

Содержание:



Свойство TEXT-ALIGN

Свойство Значения Пр* Нc*
text-align left, center, right, justify, inherit + +

Свойство определяет горизонтальное выравнивание текста внутри элемента.

Значения:

left — горизонтальное выравнивание элемента по левому краю. В большинстве случаев браузеры используют это значение по умолчанию.
center — выравнивание по центру.
right — по правому краю.
justify — по всей ширине, где браузер самостоятельно регулирует расстояния между словами и буквами содержимого строки. В зависимости от браузера результаты могут разниться.
inherit — наследование свойств родителя.

Пример:

<style>
p#right { text-align: right;}
p#center { text-align: center;}
</style>

<p id="right">Выравнивание по правому краю</p>
<p id="center">Выравнивание по центру</p>

свойство text-align

Свойство VERTICAL-ALIGN

Свойство Значения Пр* Нc*
vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, %, ДЛИНА, inherit * -

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

Область применения*: строковые элементы, ячейки таблиц.

Значения:

Допускаются отрицательные значения для длины и процентных значений, при этом элемент смещается вниз. Для ячеек таблиц применяются только значения baseline, top, middle и bottom:

baseline — выравнивает базовую линию строки по базовой линии своего родителя.
sub — смещает элемент вниз, делая его подстрочным (не изменяя размер шрифта).
super — противоположно sub, со смещением элемента вверх (см. пример).
top — выравнивает содержимое строки по верхней границе самого высокого её элемента (см. пример).
text-top — верхняя граница строки определяется верхней границей самого высокого элемента (см. пример).
middle — совмещает среднюю точку строки с точкой, находящейся выше базовой линии родителя на половину ex (относит. ед. измерения: равна высоте символа «x»).
bottom — противоположно top, выравнивает содержимое строки по нижней границе самого низкого элемента.
text-bottom — нижняя граница строки определяется нижней границей самого низкого элемента.
% — элемент сдвигается на заданный процент от значения свойства Line-height.
inherit — наследование свойств родителя.

Пример:

<style type="text/css">
.super { vertical-align: super;}
.top { vertical-align: top;}
.text-top { vertical-align: text-top;}
</style>

<p>Выравнивание слова <span class="super">Надстрочный</span> по вертикали.</p>
<p class="top">Выравнивание содержимого <img src="img2-50.jpg"> по верху самого высокого элемента.</p>
<p class="text-top">Выравнивание строки <img src="img2-50.jpg"> по верху самого высокого элемента.</p>

свойство vertical-align


Содержание: