垂直对齐复杂的多 div 站点布局

发布于 2024-11-17 04:58:26 字数 1898 浏览 2 评论 0原文

好的。事情是这样的。我已经在这个网站上阅读了很多关于垂直居中的文章和其他文章，但它们似乎都是指将单个 div 居中，而我无法将其正确应用到更复杂的布局。我正在开发一个具有标题、导航栏、内容区域、侧边栏和页脚的网站。设计的模型可以在这里看到：模型

我已经将所有的 div 很好地组合在一起感谢在容器 div 和内容 & 中使用 0px 文本技巧。侧边栏使用 display:inline-block 彼此相邻。页眉、导航栏和页脚使用 margin-left: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>

原文

OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup

I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨巷深深 2024-11-24 04:58:26

您需要在想要垂直居中的整个部分周围放置一个容器，并且需要知道高度。然后给它一个距离顶部 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;
}

You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.

So if your container is 400px high you would use the following css:

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

In your case your 'container' is 442px high, so change this css:

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

To this:

DIV.container {
    position:absolute;
    top:50%;
    margin-top:-221px;
    width:100%;
    display:table;
    text-align:center;
    font-size:0px;
    overflow:hidden;
}

回复收藏 0 原文