1

Господа верстальщики нашел метод выравнивания блока с неизвестной высотой по вертикали. Все отлично работает, но не могу разобраться как, кто нибудь может объяснить максимально "разжевано" и просто... КАК ЭТО РАБОТАЕТ? Сломал голову, гуглил, вот пример:

Код:

body, html {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
section {
    text-align: center;
    width: 100%;
    height: 100%;
}
section:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
article {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

<section>
    <article>Yeah!</article>
</section>

Фидл: http://jsfiddle.net/9Vyqv/

P.S. Насколько я знаю, vertical-align работает только с display: table, table-cell, а тут прям магия какая-то. Спасибо.

2 ответа 2

4

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

vertical-align: middle задает вертикальное выравнивания по центру. Меньший по высоте блок будет вертикально по центру большего. Опять же упрощая, если провести линию через центр одного inline блока тока она пройдет и через центр другого.

Таким образом мы можем сделать один блок равный высоте родителя и задать vertical-align: middle (для задания высоты мы сделаем его inline-block). Тогда меньший станет вертикально по центру большего, а поскольку больший равен по высоте родителя, то меньший вертикально выравняется по центру родителя тоже.

Псевдо-элемент помещается внутрь элемента. Т.е. получается так:

<section>
    <section:before></section:before>
    <article>Yeah!</article>
</section>

вот ему и задается высота равная высоте родителя, article в данном случае это меньший блок.

1
  • Ну наконец то! Огромное вам спасибо!
    – ferrari
    26 авг 2013 в 7:42
0

http://htmlbook.ru/css/vertical-align

ни слова про ограничения к vertical-align.

2

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.