Содержание

Разбираемся с vertical-align — Веб-стандарты

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

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

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делаетСкопировать ссылку

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

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

<td valign="top">
    Что-нибудь…
</td>

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

Но vertical-align работает не так.

Чем оно является на самом делеСкопировать ссылку

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block.
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

div {
    vertical-align: middle; /* эта строка бесполезна */
}

Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.

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

Несколько картинокСкопировать ссылку

Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые словаСкопировать ссылку

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:

  • baseline, значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для <input> установлено как top, он выровнен по самому высокому элементу в строке (большой картинке).

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

О ключевом слове

middleСкопировать ссылку

К сожалению, правило vertical-align: middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle, чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значенияСкопировать ссылку

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

input {
    vertical-align: 100px;
}

span {
    vertical-align: 50%;
}

img {
    vertical-align: -300px;
}

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

ЗаключениеСкопировать ссылку

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

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

vertical-align — CSS | MDN

Свойство CSS  vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).


vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;


vertical-align: 10em;
vertical-align: 4px;


vertical-align: 20%;


vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Свойство vertical-align может использоваться в двух контекстах:

  • Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:
<p>
top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
middle:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
bottom:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
super:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
sub:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>
<p>
text-top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
text-bottom:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-1em:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-100%:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>


#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
  • Для вертикального позиционирования содержимого ячейки таблицы:
<table>
  <tr>
    <td>baseline</td>
    <td>top</td>
    <td>middle</td>
    <td>bottom</td>
    <td>
      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p>
<p>Существует и другая теория, согласно которой это уже случилось.</p>
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Свойство vertical-align задаётся одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

baseline
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US), таких как <textarea> (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
sub
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки

Следующие значения позиционируют элемент по вертикали относительно всей строки:

top
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baseline (и sub, super, text-top, text-bottom, <length>, и <percentage>)
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

HTML

<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по умолчанию.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по центру.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Результат

BCD tables only load in the browser

Vertical Centering in CSS

Yuhu’s Definitive Solution with Unknown Height

Though there is a CSS property vertical-align, it doesn’t work like attribute
valign in HTML tables. CSS property vertical-align doesn’t seem to be able to
solely solve this problem:

Definition of the problem

  • there is an area (e.g. <div>) with known height in the page
  • an internal object (typically long text in <div>) is inside the area
    and I don’t know its height (e.g. because its content is
    dynamically generated from a database)
  • I want to center the object vertically within the area
  • without using HTML tables.

No general solution was known until September 2004. I have found it going
home on Wilson street.

Display an
example of the vertical centering in your browser.

Update 2015 — flex

As new browsers support display: flex, it is much easier to vertical
center an item with CSS than before.

<style>
#containter {
    height: 400px;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;
    /* justify-content: center;*/
}
#content {}
</style>

<div>
    <div>
        any text<br>
        any height<br>
        any content, for example generated
from DB<br>
        everything is vertically centered
    </div>
</div>

See this example in browser.

Uncommenting justify-content: center or
flex-direction: column you can get other types
of centering (horizontal, both). For instance justify-content: center with
align-items: center leads to centered content both vertically and
horizontally.

The most important rule is display: flex.
This relatively new value switches the display of the
containter to a special mode, enabling its
direct descendant to use and align in all the space of the containter
(using special properties like align-items and
others). The container has set some width, i.e. width: 400px just for
purpose of this example. There is no need to style the content element, but
it must be direct descendant of the container.

Support of display: flex is very good in modern browsers. Last not-supporting
browsers are Internet Explorer 9 and 10 (version 10 has a special syntax of
flex). If it is important for you to optimize for those and older browsers,
you should read the rest of this page.

 

Original content from 2004 with updates:

The idea

The keystone of the solution for Internet Explorer 6, 7 or quirk mode
is this: the internal object is absolutely positioned in half of the area
height. Then is moved up by half of its height. The wrong
interpretation of the height property in older Internet Explorer is used as
a feature here (counted height is taken as a base of percentage height of
nested tags). One extra nested tag <div> is needed for those Explorers.

Solution for standard browsers like Mozilla, Opera, Safari etc. (including
IE 8, 9, 10 and younger) is completely different. Entire area (top <div>) is
set to be displayed as a table (display: table; part of CSS2). The internal
object is set as table-cell (display: table-cell). Now — there is the key
idea — it is possible to use vertical-align property for such table-displayed
element in standard browsers. (Internet Exlorer 6, 7 and quirk mode ignores
those properties or doesn’t know their values.)

Then both syntax are merged. I use the Pixy’s

underscore hack, but with sign #. A CSS property written with the char #
on the start (i.e. #position) is visible for IE 7 and older. Such written
property is invisible for any other standard browser (e.g. Explorer 6 or 7
interprets #position: absolute; unlike other browsers). This so
called «underscore hack» seems to be valid, but if you don’t want to use it,
you may use the more structured code below in my
second example (unfortunately, not working for IE 7). Other types of
browsers and Internet Explorer 8 and younger don’t need to be hacked, as
they support display: table-cell properly.

Compatibility

The code below works in Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 and 10
beta, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, 8 and up,
every Chrome, Konqueror 3.3.1. (maybe lower too), and in Safari (Win, iOS).
The page can be HTML, HTML5 or XHTML, standard or quirk mode.

The valid example doesn’t work in IE 7 standard mode (update 2012: about
3 % of clients). If you find any easy workaround for IE 7, please let me
know.

Understandable code:

<!DOCTYPE HTML>
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders
to see it */
  </style>
</head>

<body>
  <div>
    <div>
      <div>
        any text<br>
        any height<br>
        any content, for example
generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>
See this example in
browser

Legend for colors:

CSS styles for every browser
CSS styles for standard browsers
CSS style only for Internet Explorer 6, 7 and quirk (with # hack)

The result looks:

any text
any height
any content, for example generated from DB
everything is vertically centered

See this example in
browser

Let’s make it structural and without hacks

(NOTE: this valid solution described below doesn’t work in Internet Explorer
7 (standard mode), because IE7 doesn’t understand table- values in display
property. The centered object is too high. BUT: IE 7 is used by only about 3
% of users (2012) and the number will decrease. If you still do mind IE7
users, please use the non-valid solution above, write in quirk mode, or use
html conditional comments for separating the properties for IE 7 somehow.)

The first example above is not nice, but I hope you have understood it. It’s
possible to write code differently. For example this way:

<div>
  <div>
    <div>
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

And the structured valid style:

<style type=»text/css»>
#outer {height: 400px; overflow: hidden; position:
relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;}
/* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align:
middle; width: 100%; position: static;}

#inner {position: relative; top: -50%}
/* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>


See the valid
example in browser (it looks the same way as the last one).

Color legend:

CSS style for Internet Explorer 6 only (or quirk)
CSS styles for standard browsers

CSS2 selector #value[id] is equivalent to selector #value,
but Internet Explorer 6 ignores these types of selectors with [id].
Generally: syntax
*[foo] means any element with attribute foo. Any
HTML element #something must have the attribute id by definition set to «something».
That’s the trick — #value[id] works in standard browsers only
(similarly works .value[class])

There’s CSS property position set to absolute or relative for Internet
Explorer. The code position: static get’s it back to default
value in standard browsers (property top doesn’t work then).

Both vertical and horizontal centering

The core code will be the same, you just need to add some extra CSS rules.
If is your page in standard mode, add this code:

<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>

As you probably see, this is the most common horizontal centering method —
auto left and right margin. Because margins needs the space in Firefox and
Opera, you need to set a width to the #outer div. If 100% doesn’t fit your
needs, use any other value.

The important thing is to set some proper width to #inner. This tutorial is
about vertical centering of an object with unknown height. I assume that
you know the width of the object (in most cases you will simply decide
how wide it should be). You may use the pixel values, or the percentage
width. If the centered object is only an unknown-size image, you don’t need
to set width.

If you use quirk mode page rendering (mode depends on !Doctype, as you know),
added code should be a bit longer, because quirk mode of Exploder doesn’t
understand auto margins, but has one nice bug in text-align interpretation
instead. This code should work for both standard and quirk mode:

<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align:
left;}
</style>

Please take note that this is just part of code, which you have to add to
the previous example. If you are lazy to combine codes, please see the
complete example in browser:
vertical
and horizontal centering. You know, I’m lazy too.

How to center vertically on window’s height

The same way, and just add the style:

<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
...
</style>

It seems that #outer declaration should be sufficient, but it is not. Body
and html declaration sets 100% of the window’s height as a base for next
percentage. Now it is better not to set overflow: hidden (like in the
examples above), because when the content would be taller than window, then
it would be impossible to scroll on.

Related

Previous attempt to center vertically:

Examples:

Read in other language:

Centralizando verticalmente com CSS — Brazilian Portuguese translation of
this article by Maurício Samy Silva

Вертикальне центрування в CSS — Ukrainian translation by Agnessa Petrova
from A2Goos team

Вертикальное центрирование в CSS — Russian translation by Aleksandr Molochan

Czech version of this article
(original, not updated)

All other articles on this website
www.jakpsatweb.cz is in Czech.

About

First published Sep 21, 2004, updated Oct 23, 2006 and May 25 2008. Major
update Dec 6 2012 including bugfix of code in valid example. June 2015 major
update about flex. I’ll update this article with more information if you
wish.

Author:

Dušan Janovský
aka Yuhů
[email protected]
www.jakpsatweb.cz
From Prague, Czech Republic, search algorithms specialist in Seznam.cz
search engine. Wi
Tw
Fb

Div vertical align middle – Тарифы на сотовую связь

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Значение по умолчаниюbaseline
НаследуетсяНет
ПрименяетсяК встроенным элементам или ячейкам таблицы.
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

CSS 1CSS 2CSS 2.1CSS 3

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
vertical-align

1

12

1

4

4

1

1

18

4

14

1

1.0