Вертикальное выравнивание сложного макета сайта - PullRequest
Новая
       0

Вертикальное выравнивание сложного макета сайта

3 голосов
/ 26 июня 2011

OK. Вот сделка. Я прочитал довольно много статей на этом сайте и других о вертикальном центрировании, но все они, кажется, относятся к центрированию одного div, и я не смог правильно применить его к более сложному макету. Я работаю над сайтом, у которого есть заголовок, панель навигации, область содержимого, боковая панель и нижний колонтитул. Макет дизайна можно увидеть здесь: макет

У меня все div'ы хорошо сочетаются друг с другом благодаря использованию текстового трюка 0px в div контейнера, а контент и боковая панель располагаются рядом друг с другом с помощью display: inline-block. верхний колонтитул, панель навигации и нижний колонтитул центрированы по горизонтали, используя margin-left: auto & margin-right: auto. вместе это прекрасно отрисовывает весь сайт по горизонтали, но я не могу понять, как применить вертикальное центрирование ко всему сайту, не нарушая дизайн. Это не гибкий макет, все div имеют фиксированные размеры в пикселях, которые очень хорошо вписываются в контент. Кажется, должен быть какой-то способ использовать абсолютное или относительное позиционирование и проценты для центрирования всего по вертикали, но я не могу понять, как это сделать. Код для макета прилагается. Спасибо! 

<style type="text/css">
<!--
DIV.container {
    position:relative;
    height:100%;
    width:100%;
    display:table;
    text-align:center;
    font-size:0px;
    overflow:hidden;
}
#header {
    width:650px;
    height:87px;
    z-index:1;
    background-color:#C90;
    vertical-align:middle;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
}
#navbar {
    width:650px;
    height:32px;
    z-index:2;
    background-color:#0FF;
    vertical-align:middle;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;
}
#content {
    width:500px;
    height:265px;
    z-index:3;
    background-color:#33F;
    display:inline-block;
    vertical-align:middle;
    font-size:12px;
}
#sidebar {
    width:150px;
    height:265px;
    z-index:4;
    background-color:#999;
    display:inline-block;
    vertical-align:middle;
    font-size:12px;
}
#footer {
    width:650px;
    height:58px;
    z-index:5;
    background-color:#F69;
    vertical-align:middle;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;
}
-->
</style>
</head>

<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 26 июня 2011

Вам нужно поместить контейнер вокруг всей части, которую вы хотите, по центру, и вам нужно знать высоту.Затем вы задаете ему позицию absolute, которая составляет 50% от вершины, и margin-top минус половину высоты.

Так что, если ваш контейнер имеет высоту 400px, вы должны использовать следующий CSS: 

#container {
    position:    absolute;
    top:         50%;
    margin-top: -200px;
}

В вашем случае ваш «контейнер» имеет высоту 442px, поэтому измените этот CSS: 

DIV.container {
    position:relative;
    height:100%;
    width:100%;
    display:table;
    text-align:center;
    font-size:0px;
    overflow:hidden;
}

На этот: 

DIV.container {
    position:absolute;
    top:50%;
    margin-top:-221px;
    width:100%;
    display:table;
    text-align:center;
    font-size:0px;
    overflow:hidden;
}
1 голос
/ 26 июня 2011

Ваша таблица стилей может быть намного чище / меньше.

См. эту демонстрационную скрипку .

И если вам не нужна полоса прокрутки, когда окно браузера становитсямаленький, затем добавьте overflow: hidden к телу, см. эту скрипку .Но это НЕ совет в свете юзабилити.

0 голосов
/ 26 июня 2011

И чтобы сделать его динамичным, используйте Javascript / jQuery, чтобы найти высоту окна, и отрегулируйте margin-top DIV.container, как показано Kokos.

...