Горизонтальное и вертикальное выравнивание по центру(vertical-align: middle) для div с помощью html и css
Задача
Выровнять текст и блоки по вертикали и горизонтали, используя css и html.
Вертикальное выравнивание однострочных элементов — аналог vertical-align:middle
Часто бывает такое, что нужно выровнять вертикально по центру одну строку текста в блоке фиксированной высоты. Для этого достаточно просто задать высоту строки равной высоте блока:
<div style="height: 44px; line-height: 44px;">
Текст, выравниваемый по центру вертикально.
</div>
Текст, выравниваемый по центру вертикально.
</div>
Горизонтальное выравнивание div
Для этого существует замечательный трюк:
<div style="width: 444px; margin: 0px auto;">
Див, выравниваемый по центру горизонтально.
</div>
Див, выравниваемый по центру горизонтально.
</div>
Правда, есть у способа и недостатки. Во-первых, нужно указывать ширину блока в пикселах или процентах, а во вторых — трюк не всегда работает в ie, в зависимости от доктайпа.
Вертикальное и горизонтальное выравнивание div одновременно
Сейчас речь пойдет именно о выравнивании самого блока относительно родительского, а не о центрировании текста. Итак, если дочерний элемент имеет фиксированную ширину и высоту, его будет достаточно просто разместить прямо в середине родительского блока следующим образом:
<div> <!-- Это родительский блок произвольных размеров -->
<div style="width: 444px; height: 222px; position: relative; left: 50%; top: 50%; margin-left: -222px; margin-top: -111px;"> <!-- А это дочерний блок, который мы выравниваем -->
Див, выравниваемый по центру родительского горизонтально и вертикально одновременно.
</div>
</div>
<div style="width: 444px; height: 222px; position: relative; left: 50%; top: 50%; margin-left: -222px; margin-top: -111px;"> <!-- А это дочерний блок, который мы выравниваем -->
Див, выравниваемый по центру родительского горизонтально и вертикально одновременно.
</div>
</div>
Используя этот метод, значения margin-left и margin-top нужно задать равными половине значений width и height соответственно.
Почти как настоящий vertical-align в ie :)
Итак, если ни один из вышеописанных методов центрирования по вертикали вам не подошел, то этот способ для вас. Работает он точно так же как и настоящий vertical align.
HTML:
<div class="container"> <!-- блок-контейнер -->
<div> <!-- блок с содержанием -->
Элемент, который выравнивается вертикально внутри блока-контейнера.
</div>
<div class="auxiliary"> </div> <!-- пустой вспомогательный блок -->
</div>
<div> <!-- блок с содержанием -->
Элемент, который выравнивается вертикально внутри блока-контейнера.
</div>
<div class="auxiliary"> </div> <!-- пустой вспомогательный блок -->
</div>
CSS:
.container {
display: table-cell;
vertical-align: middle;
height: 444px; width: 333px; border: 1px solid red; /* просто чтобы было видно ;) */
}
*+html .auxiliary {
display: inline-block;
vertical-align: middle;
width: 0px;
height: 100%;
}
*+html .container div {
display: inline-block;
vertical-align: middle;
}
*+html .container div, .auxiliary {
display: inline;
}
display: table-cell;
vertical-align: middle;
height: 444px; width: 333px; border: 1px solid red; /* просто чтобы было видно ;) */
}
*+html .auxiliary {
display: inline-block;
vertical-align: middle;
width: 0px;
height: 100%;
}
*+html .container div {
display: inline-block;
vertical-align: middle;
}
*+html .container div, .auxiliary {
display: inline;
}
Поделиться ссылочкой: