Для того чтобы отцентрировать inline элемент в блочном элементе, не прибегая к приравниванию в табличный вид. При этом высота родителя нам изначально неизвестна. Можно воспользоваться следующим методом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .before{ display: inline-block; height: 100%; vertical-align: middle; font-size: 0; } .center{ display: inline-block; vertical-align: middle; } </style> <div class="wrapper" style="height:100px;"> <span class="before"></span> <span class="center"> Наш элемент </span> </div> |
В данном случае прибегаем к помощи дополнительного элемента before, занимающего всю высоту родителя.
Наш же блок центруем по его высоте.
Можно еще более упростить описание, воспользовавшись псевдоэлементом ::before и заодно отцентрировать наш элемент по горизонтали:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> .wrapper:before{ content: ''; display: inline-block; height: 100%; vertical-align: middle; font-size: 0; } .center{ display: inline-block; vertical-align: middle; } .wrapper{ text-align: center; } </style> <div class="wrapper" style="height:100px; width: 100%;"> <span class="center"> Наш элемент </span> </div> |