Question

我的网站有一个布局：http://imgur.com/RsAFgyz 问题是，我不知道如何使中心条带在导航栏后面，保持朝向页面中间（即使在缩放时），或者甚至以正确的方式显示。有人可以指导我一个教程，或者告诉我如何？这是我的完整代码：http://jsfiddle.net/c7r6g/（我已将导航栏设置为图像文件，如果您没有注意到）导航栏为.rounded，而我想要居中的div是#centerstrip

对不起，如果这有点模糊，我是CSS的业余爱好者（特别是定位。）

Answer 1

查看CSS z-index property。有了它，您可以定义哪个元素放在另一个元素之上。

如果您将其添加到#centerstrip的样式中，它将显示在导航栏下方。

#centerstrip {
    position: absolute;
    z-index: -1;
    top: 0px;
}

Answer 2

由于您的导航栏是您的内容的一部分，您所要做的就是将其扩展到外部，这可以通过使其宽度大于100％来完成。这将使其扩展到主要内容的右侧。

要向左移动，你有两个选择，两个都有它们的优点： 1.使用相对位置和负左值将导航栏向左移动。 2.在左侧使用负边距。

这将允许您避免使用z-index，因为导航栏是中心条的一部分，所以z-index可能效果不佳。

Answer 3

对CSS进行了更改，这在你的小提琴中运行良好，用你的小提琴替换它。

#centerstrip {
    background-color: #bbbbbb;
    height: 100%;
    width: 50%;
    display: block;
    margin:auto;
    z-index: -1;
}

通过这个你的div将与中心对齐，你的div也将在导航栏的下方。

Answer 4

我通常将div中的所有内容包装在div中，然后将div居中。 body元素的宽度自然等于浏览器窗口的宽度，因此如果你的body标签中的第一个标签是div，并且你将div放在中心，它将居中于身体，从而居中于窗口。这是一些示例代码：

<!doctype HTML>
    <html>
        <head>
            <meta lang="en" charset="utf-8" /> 
            <title>Sample</title>
        </head>
        <body>
            <div id="container">
            </div>

            <style>
                body{
                    background-color: red;
                }
                #container{
                    height: 400px;
                    width: 400px;
                    margin-left: auto;
                    margin-right: auto;
                    background-color: blue;
                } 
            </style>

        </body>
    </html>

诀窍是使用margin-left: auto;和margin-right: auto;，并确保您将该样式放在div上。你不能把这种风格放在身体上，因为身体没有任何东西可以引用它来居中。然而，div可以相对于身体的宽度居中自身

Answer 5

稍等一下，你走了。我设法用CSS渲染你的链接图像。

虽然我只使用div，但概念是相同的。

http://jsfiddle.net/jqarz/1/

以下代码。

要探索的几个概念是宽度，边距和填充。重要的是要注意宽度实际上是“内容框的宽度”而不是元素的宽度，就像许多网站描述得不好。

有很多方法可以做到这一点，这只是一个，它实际上取决于你想要做什么以及做什么。

HTML：

<div id="background">

    <div id="navbar">navbar</div>
    <div id="content"></div>    

</div>

CSS：

#background
{
    z-index: 0;
    padding: 15px 15px;
    width: 600px;
    height: 800px;
    background-color: #CFF;
    border-style: solid;
    border-width: 1px;
}

#content
{
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 90%;
    height: 800px;
    background-color: #FFC;
}

#navbar
{ 
    top: 150px;
    position: absolute;
    z-index: 2;
    width: 600px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    height: 100px;
    background-color: #FCF;
    text-align: center;
    font-size: 4em;
}

Answer 6

我建议使用

.property{
   z-index: 10;
}

其中数字表示z数组位置中的最高元素。

此外，如果您希望它以不同的分辨率和缩放方式保持相同，请尝试响应式设计。

如果您打算进入响应式设计，我也可以推荐一些非常好的框架，例如bootstrap或foundation。

CSS：居中主页div

6 个答案: