vertical-align

vertical-align

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. middle Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top Выравнивание верхнего края элемента по верху самого высокого элемента строки. inherit Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height , при этом 0% аналогично значению baseline .

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
TEX и LATEX
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

[window.]document.getElementById(» elementID «).style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

Как выравнять span по вертикали div?

Помогло, но разве это центр? o.O
Или у меня косоглазие.

Чтобы наглядно было видно, вот и ссылку кинул.

Алексей Зуев: со значением line-height: 48px; не по центру располагаются. Поменял значение на line-height: 44px; и стало ровно. Ничего страшного что значение не как у основного блока?

Алексей Зуев: Все равно не пойму как вычислить значение, чтобы было по центру. Бордер 2px, сам див 48px. А мне удалось поставить по центру написав 44px.

смотрите, почему так просходит, Вы ставите высоту header 48px и бордер 2px, а внутрь вкладываете элементы и высота у них 50px. там тоже зачем-то бордер. header должен по идее иметь высоту 50px внутренних + 2px у самого себя. Т.е. header имеет размер 52px, а Вы его обрезаете

Источник

How to Vertically Align a Text Within a Tag to the Center

In the example below, we use a element with a class attribute and then style it with CSS. We set the display to «flex», specify the height, border, and padding properties. Then, we add the white-space property with its «normal» value and the word-break property set to «break-word». Finally, we center the text in our by setting the align-items property to «center».

In order to horizontally align a content inside a div or span to center, you should set the justify-content property to center . Click here to learn more.

Example of vertically centering a text within a with the CSS align-items property:

html> html> head> title>Title of the document title> style> .example < height: 200px; border: solid #CCCCCC 2px; padding: 0 10px; white-space: normal; word-break: break-word; display: flex; align-items: center; > style> head> body> span class="example"> This is a vertically aligned text. span> body> html>

Result

In the next example, to center the text inside a , we use the text-align property. Here, we set the display to “inline-block” and specify the width as well.

Example of vertically centering a text within a with the CSS text-align property:

html> html> head> title>Title of the document title> style> span < display: inline-block; width: 9em; text-align: center; border: 1px solid green; white-space: normal; word-break: break-word; padding: 60px 0; > style> head> body> span> This is a vertically aligned text. span> body> html>

In our last example, we use the vertical-align property with the «middle» value and specify the line-height, border, and display properties.

Example of vertically centering a text within a with the CSS vertical-align property:

html> html> head> title>Title of the document title> style> .example < line-height: 150px; border: 1px solid #000; display: inline-block; vertical-align: middle; > style> head> body> span class="example"> This is a vertically aligned text. span> body> html>

Источник

Как выровнять элемент по вертикали внутри блочного элемента

Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

1. Представить блочный элемент как ячейку таблицы ( display: table-cell ).
2. IE6-7: метод expression.
3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
4. Позиционирование при помощи внешнего блока ( position:absolute ).

Ну а подведя итоги, рассмотрим еще один метод:

5. Выравнивание с помощью свойства vertical-align.

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

    .wrapper  
   

• Не работает в IE7 и ниже;
• Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
• Не всем нравится сам факт использования display: table-cell .

IE6-7: метод expression

Т.к. предыдущий способ не работает в IE6-7, то надо исправить эту неприятность.

Expression — короткие куски JS кода, которые помещаются в файл стилей, выполняются один раз и работают только в IE. Expression невалидны. Добавляем к предыдущему примеру в файлы стилей для IE6 и 7 такой кусок кода:

Рассматривать достоинства и недостатки смысла тут нет, т.к. достоинств нет, кроме того, что этот способ дополняет первый в IE6-7, но т.к. эти браузеры уже устарели, на них можно закрыть глаза.

line-height

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

    .wrapper  
   

position и отрицательный margin вверх

Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top , равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative :

    .wrapper < position: relative; height: 400px; >.wrapper p 
Я выровнен по вертикали
 
   

• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении.

• Трудоемко при большом количестве элементов;
• Сложно управлять;
• Необходимо знать и фиксировать высоту элемента;
• В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

Итог по популярным методам

Как видно, данные методы не являются универсальными – каждый из них имеет пусть и небольшие, но недостатки. Наиболее универсальным оказывается метод display: table-cell , но он мне никогда не нравился, к тому же мы очень долго не отказывались от поддержки IE6-7. Поэтому появилась необходимость поработать над чем-то более универсальным. Рассмотрим Выравнивание при помощи vertical-align .

Выравнивание при помощи vertical-align

Как известно, свойство vertical-align не работает для блочных элементов, поэтому применять это свойства для них бесполезно. Однако, данное свойство прекрасно работает для inline и inline-block элементов. Если мы попробуем применить данное свойство для элементов внутри блочного элемента, то мы получим следующую картину:

    .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5  
    
   

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

    .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5 < vertical-align:bottom; font-size:12px; >.spanvmiddle  
        

Зададим для всех элементов vertical-align:middle .

Что ж, одну строку мы таким образом отцентрировали. А что, если надо несколько строк? И тут проблем нет. Надо лишь для текстовых элементов задать display:inline-block :

    .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.wrapper span < display:inline-block; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:middle; font-size:11px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:32px; >.el5 < vertical-align:middle; font-size:11px; >.spanvmiddle  
 строками текста   с тремя 
строками текста    

Если нам не важна совместимость со старыми версиями IE, то элемент мы можем удалить, а его стили заменить на:

Стоит отметить несколько моментов:

• К элементам, которые выравниваются, нельзя применять свойство float .
• Между соседними inline-block элементами всегда есть расстояние, поэтому если их надо прижать друг к другу, то для внешнего блока надо задать font-size:0px; а у самих элементов восстановить, задав нужное значение.
• Для внутренних элементов таким образом можно задавать как одинаковые значения ( top , bottom или middle ), так и разные.

• Простота;
• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении;
• Подходит как для одной строки, так и для нескольких. Также, т.к. элемент имеет display:inline-block , он может содержать текст, графику (фон, картинка) и любой другой элемент.

• Приходится добавлять дополнительный элемент;
• При использовании псевдоэлемента :after , теряется поддержка старыми версиями IE.

Источник