Вертикальное выравнивание в CSS, часть 2.
February 23rd, 2007 by Yuriy DrozdovКак и обещал, продолжаю. Если брать метод, описанный в Что такое vertical-align и с чем его едят?, то он хорош только в том случае, если контейнер (в нашем случае был div) имеет достаточную ширину и вся строка поместится в один линейный блок. Если строка не влазит в ширину контейнера, она разбивается на несколько линейных блоков. И каждый линейный блок наследует line-height. Получаем в этом случае, мягко говоря, не совсем то, что ожидали.
Вертикальное выравнивание по стандарту CSS можно выполнить так:
Например, в Firefox 2 это выглядит вот так (я добавил к свойствам border:solid red 1px; height: 100px;):
Выставим ширину для div, так чтобы строка не помещалась без разбиения на несколько линейных блоков. Получаем:
Наивный читатель подумает что это уже все, задача вертикального выравнивания решена. Но, к сожалению, в IE отсутствует поддержка значения table-cell для свойства display. Поэтому, применить выше описанный метод для вертикального выравнивания в нем нельзя.
Для того, чтобы вертикальное выравнивание коснулось и браузера Internet Explorer немного изменим HTML код и CSS, а также воспользуемся условными комментариями. CSS код представлен ниже:
-
#outer{
-
height:100px;
-
width:150px;
-
display:table;
-
border:solid #f00 1px;
-
}
-
#container {
-
display:table-cell;
-
vertical-align:middle;
-
}
Представленный выше код применяется для браузеров, корректно поддерживающих стандарты CSS. С помощью условных комментариев, делаем код работоспособным в Internet Explorer. Вставляем следующее.
-
<!––[if IE ]>
-
<style type="text/css">
-
#container {top:50%;position: absolute;}
-
#inner {top:-50%;position:relative;}
-
</style>
-
<![endif]––>
И, собственно, сам HTML выглядит так:
Внизу можно увидеть весь код в деле:
Чтобы не портить валидность:
* html #container {top:50%;position: absolute;}
* html #inner {top:-50%;position:relative;}
Спасибо за комментарий. Но код и так валидный. A * html - это CSS хак, который уже не поддерживается IE7(подробнее об этом хаке и других на блоге MSDN - http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx). Рекомендуют вместо этого использовать условные комментарии.Что я и сделал.
если содержимое блока inner достаточно большое по высоте (половина высоты окна броузера), то появляется вертикальный скроллбар
Да, только что попробовал имеет место для IE, чтобы убрать скролбар ставим overflow:hidden для #outer
Да, имеет месо именно для ИЕ.
Мне нужно центровать относительно в окна броузера. И кол-во контента зарание неизвестно, и возможен случай, когда контент не будет вмещаться в окно. Тогда overflow:hidden не подходит. Хотя я счас слабо соображаю, и сейчас не проверю, т.к. убегаю. Может я не прав.
Короче, попробовал, если контент влазит в окно, то overflow:hidden подоходит, в случае же, если контент может не вмещаться в окно, то этот метод для ИЕ не подходит.
а у #outer и #container какая высота стоит?
100%
А, нет, соврал, у #outer стоит 100%, а у #container не задана
Видимо прийдется ждать когда ие начнет поддерживать свойство display:table-cell
[...] И вот сегодня меня занесло на страницу http://blog.sribna.com/vertikalnoe-vyiravnivanie-v-css-chast-2.htm [...]
[...] Про вертикальное выравнивание я уже писал, можно почитать тут и тут. Написать снова меня натолкнула статья Артема Курапова - Element alignment. [...]
Так как же все это обединить ?… на страничке… что бы, допустим, небольшая картинка внедренная в HTML, находилась точно по центру, горизонтальному и вертикальному, вне зависимости от масштабирования окна браузера FF и IE7
___
Кого-нибудь не затруднить набросать примерный полный код HTML страницы… пожалуйста….
И с наступающим:)
Посмотрите исходный код страницы http://sribna.com, вот Вам и пример
Спасибо, Вас тоже с наступающим!
Спасибо…
я здесь нашел неплохой наглядный пример
http://xhtml.ru/2005/05/24/vertical_centerbox/
что за привычка, постоянно рассматривать один див. хех,
это что ж получается у тебя страница состоит из одного дива?
а если див зафлотирован или еще что-то?..
вообщем это больше похоже на бестолковые заметки, чем на полезный совет! ЗРЯ ПИСАЛ МНОГА БУКАФ! КГ/АМ!
В данном примере 3 дива. Причем последний див может служить контейнером для других элементов. Чтобы свести задачу к рассмотрению именно вертикального выравнивания и не усложнять лишними элементами, используются только дивы.
где можно применить это выравнивание?? покажите мне сайт где сделано!!!
или это только для того чтобы вешать надпись “сайт на реконструкции” в центре экрана
А если к #container применить например float:left то вообще выравнивание перестает работать
Применяйте float:left к диву обертке, т.е. к #outer
не знаю как у вас а у меня дыннй код в ИЕ работает криво а конкретно текст не по середине дива располагается а выше него как я думаю влияет какраз вот эта строчка в css
#inner {top:-50%;position:relative;}