CSS：中心的主页div

我有一个布局记在我的网站：http://imgur.com/RsAFgyz 问题是，我不知道如何使中心带走在导航栏后面，留在页面中间（即使在放大时），甚至显示正确的方式。有人可以指导我参加一个教程，或告诉我如何？这里是我的全码：http://jsfiddle.net/c7r6g/（我已经设置了导航栏为图像文件，如果你没有注意到）导航栏是.rounded，而我试图中心的股利是#centerstripCSS：中心的主页div

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

来源

2013-10-19 Blue_Dragon360

在你的CSS做了改变，这可以在你的小提琴中很好地工作，用你的小提琴代替它。

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

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

来源

2013-10-19 20:13:32

这就是我使用你的代码时得到的结果：http：//imgur.com/54DuhIS你使用了什么浏览器？它在Firefox或Chrome中不适用于我。 –

我在Chrome浏览器中查看并进行了必要的更改，现在就试试。 –

当我把它，而不是现在显示.. –

看看CSS z-index property。有了它，您可以定义哪个元素放置在另一个元素的顶部。

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

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

来源

2013-10-19 20:03:39 evsc

好多了，谢谢。但是，我有一个问题，那就是当在浏览器中缩小时，它保持相同的大小，并且不会停留在中心位置。有没有一个你知道的修复？ –

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

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

这将允许您避免使用z-index，由于导航栏是中心条的一部分，因此z-index可能并不富有成效。

来源

2013-10-19 20:08:57 Hans

我不确定如何做你正在说的。我应该将UL的宽度设置为大于100％吗？因为我有导航栏上每个按钮的像素信息。另外，我对我的导航栏感到满意，但是对于应该在它背后的中心地带而言并非如此。你能详细说明一下吗？ –

我通常将所有内容都包裹在div中的body中，然后居中div。 body元素的宽度自然会与浏览器窗口的宽度相等，因此，如果您的body标签中的第一个标签是div，并且该div居中，则它将以body为中心，因此也是窗口的中心。下面是一些示例代码：

<!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可以把自己对准身体的宽度

来源

2013-10-19 21:25:46 Justin

只是搞乱了一下，在这里你走了。我设法在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; 
}

来源

2013-10-19 21:53:09 muiiu

我可以推荐使用

.property{ 
    z-index: 10; 
}

其中数字表示在Z阵列状的位置最高的元素。另外，如果您希望它以不同的分辨率和缩放方式保持相同的方式，请尝试响应式设计。

可能我也建议，如果你要进入响应式设计，考虑看看一些很好的框架，比如引导或基础。

来源

2013-10-20 00:23:11 codeninja

CSS：中心的主页div

回答

相关问题