22 октября 2009 г.

1001-ый способ вертикального выравнивания

О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).

screen-capture




Разметка



Сразу оговорюсь, способ имеет недостаток, а именно, лишний элемент. Разметка будет выглядеть так, как показано ниже:
<div class="parent">
    <div class="child">Текст, который заключён во внутренний блок. </div>
    <div class="helper"></div>
</div>


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


Стили



Первая идея, которая возникает - задать принудительно высоту строки внутреннего содержимого с помощью line-height в 100% от высоты div.parent - отпадает, т.к. влечёт за собой изменение высоты строки внутри div.child, а переопределение line-height внутри div.child к положительному результату не приводит. На помощь приходит та самая распорка из 90-ых. Добавленный блок Div.helper должен иметь высоту div.parent, тем самым раздвигая нашу строку, как нам нужно. В результате можно выделить значащий CSS:

.child {
    ...
    display:inline-block;
    vertical-align:middle;
}
.helper {
    ...
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}



Боремся с IE



Применяем хак для IE, который позволит использовать display:inline-block для блочных элементов (а также хак для FF2):

.child {
    ...
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    zoom:1;
    //display:inline;
}
.helper {
    ...
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
    zoom:1;
    //display:inline;
}



Результат



Работающий пример можно посмотреть здесь.

Комментариев нет:

Отправить комментарий