CSS:将主页 div 居中

我为我的网站准备了一个布局：https://i.stack.imgur.com/PyVVF.jpg问题是，我不知道如何使中心条位于导航栏后面，保持在页面中间（即使在缩放时），甚至以正确的方式显示。有人可以指导我学习教程，或者告诉我怎么做吗？这是我的完整代码：http://jsfiddle.net/c7r6g/（如果您没有注意到，我已将导航栏设置为图像文件）导航栏是.rounded的，我试图居中的div是#centerstrip

抱歉，如果这有点模糊，我是CSS的业余爱好者（尤其是定位。

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

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

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

在你的 CSS 中做了一些更改，这在你的小提琴中工作得很好，在你的小提琴中用这个替换它。

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

这样，您的div

将与中心对齐，您的div 也将位于导航栏下方。

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

要将其向左移动，您有两种选择，这两种选择都有其优点：1. 使用相对位置和负左值向左移动导航栏。2. 在左侧使用负边距。

这将允许您避免使用 z 索引，由于导航栏是中心条的一部分，因此可能不会产生效果。

我通常将所有内容都包装在div 中，然后将div 居中。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 可以相对于主体的宽度居中

只是乱

搞了一会儿，你去吧。我设法在 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;
}

我可以推荐使用

.property{
   z-index: 10;
}

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

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

如果你要进入响应式设计，我也可以推荐，看看一些非常好的框架，如引导或基础。

相关内容

最新更新

热门标签：