Page 270 - Сила CSS3 Освой новейший стандарт

270 • Глава 7. Вспоминаем навыки верстки

Рис. 7.16. В браузерах на базе Webkit форма поиска теперь заполняет все пространство
справа от логотипа, а содержимое формы выравнивается по правому краю

Таким образом, Firefox прекращает сжимать заголовок и вместо этого растягива-
ет его на полную ширину обрамляющего блока div. Форма поиска отображается
у правого края экрана не только в браузерах на базе Webkit, но и в Firefox.
Теперь, когда логотип и форма правильно выровнены по горизонтали, давайте не-
много подвинем их по вертикали. Для этого всего лишь нужно в div-блоке header
присвоить свойству box-align значение center:
#header {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-align: center;
box-align: center;
width: 100%;
padding: 20px 0;
}

Вот и все: логотип и форма находятся на одной средней линии, и оба этих элемента
вертикально центрованы внутри div-блока header (рис. 7.17). Не важно, какого раз-
мера шрифт будет выбран для заполнения формы и останутся ли ее элементы на
одной строке или будут перенесены на вторую, — вертикальная центровка логотипа
и формы поиска не нарушится.

Рис. 7.17. Для вертикальной центровки логотипа и формы поиска нам понадобилось
только присвоить свойству box-align внутри div-блока header значение center

www.trk.kg