vertical-align
[w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;
).
vertical-align
для элементов таблицы и для display: table-cell;
vertical-align
, заданное элементам таблицы, выравнивает содержимое в ячейке по вертикали.
текст | строка1
строка2 |
<style>
.demotable {
background: #E7D5C0;
}
.demotable td {
height: 150px;
border: 1px dashed #E7D5C0;
background: #fff5d7;
vertical-align: middle; /* выравнивает содержимое по центру высоты ячейки */baseline; /* выравнивает содержимое ячейки по базовой линии ячеек, которым установлено vertical-align: baseline;
*/top; /* выравнивает содержимое по верху ячейки */bottom; /* выравнивает содержимое по низу ячейки */
}
</style>
<table class="demotable">
<tr>
<td><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
<td>текст
<td><div>строка1<br>строка2</div>
</table>
СтрокаБазовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».
display: table-cell;
похож на <td>
. Высота элемента с display: table-cell;
равна высоте наиболее высокого элемента с display: table-cell;
из группы. vertical-align
тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline
.
строка2
<style> .demotable { background: #E7D5C0; } .demotable > div { display: table-cell; height: 150px; /* значение не может быть в % от высоты родителя */ border: 1px dashed #E7D5C0; background: #fff5d7; vertical-align: baseline;middle;top;bottom; } </style> <div class="demotable"> <div><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div> <div>текст</div> <div><div>строка1<br>строка2</div></div> </div>
Если элемент с display: table-cell;
нужно выровнять по высоте родителя, то родителю нужно указать display: table;
или display: inline-table;
.
строка2
<style> .demotable { display: table; height: 150px; /* значение может быть в % от высоты родителя */ background: #E7D5C0; } .demotable > div { display: table-cell; border: 1px dashed #E7D5C0; background: #fff5d7; vertical-align: middle; } </style> <div class="demotable"> <div><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div> <div>текст</div> <div><div>строка1<br>строка2</div></div> </div>
vertical-align
у элементов с display: inline;
, display: inline-block;
и display: inline-table;
vertical-align
у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height
).
Высота элемента: px
Отступ снизу: px
<style>
.sem {
background: #fff5d7;
line-height: 150px;
font-size: 0; /* font-size
можно и не обнулять, если не смущает что от нижнего края элемента до нижнего края родителя будет меньше пространства, чем предполагается, на значение около 4px (это расстояние от низа строки до baseline) */
}
.sem div {
display: inline-block;
font-size: medium;
line-height: normal;
vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit /* наследуется значение родителя */;
}
</style>
<div class="sem"><div>
<!-- содержимое -->
</div></div>
Или относительно соседних элементов, находящихся на данной строке.
<style> b { font-size: 150%; vertical-align: baseline; /* базовая линия элемента совпадает с базовой линией строки родителя */top; /* выровнять верхний край элемента по верхнему краю размещённого выше остальных элемента строки */text-top; /* вертикальное выравнивание верхнего края элемента по верхнему краю текста строки */middle; /* середина элемента совпадает с центром строчной «x» предка */bottom; /* нижний край элемента выравнивается по нижнему краю расположенного ниже всех элемента строки */text-bottom; /* вертикальное выравнивание нижнего края элемента по нижнему краю текста строки */sub; /* базовая линия элемента совпадает с базовой линией нижнего индекса */super; /* базовая линия элемента совпадает с базовой линией верхнего индекса */inherit; /* наследуется значение родителя */ } span { display: inline-block; height: 5em; } </style> <b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
Практическое использование: Как сделать обтекание картинки текстом.
Или vertical-align
сам увеличивает строку родителя на значение, указанное в px
или %
.
<style> b { font-size: 150%; vertical-align: baseline; } span { display: inline-block; height: 100px; } </style> <b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
vertical-align
не работает
Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;
:
- выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если
vertical-align
присвоить родителю. - выравнивает элемент только относительно других соседних элементов, если для родителя не указана
line-height
. То есть у родителя должно быть два и более дочерних элементов.
<style>
.parent {
min-height: 150px; /* если дочерний элемент будет выше родителя, то родитель увеличится на необходимую высоту. При необходимости заменить на height
*/
background: #E7D5C0;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 100%;
}
.parent div {
max-width: 300px; /* не обязательно */
width: 100%; /* не обязательно */
height: 100px; /* не обязательно */
background: #fff5d7; /* не обязательно */
text-align: left; /* не обязательно */
display: inline-block;
vertical-align: middle;
vertical-align: middle;
}
.parent:before {
content: "";
display: inline-block;
min-height: inherit;
height: 100%;
vertical-align: middle;
}
</style>
<div class="parent"><div></div></div>
Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height
может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;
.
Комментариев нет: