Question

我终于试图取消桌子并使用CSS。

我有3个DIV组成一个三层布局：页眉，正文和页脚。我现在正试图在这些图层的顶部叠加一个900px宽的DIV，居中对齐，这将保留我的一些内容和导航按钮。

这是3层：

enter image description here

而这（在Photoshop中完成），正是我想要实现的，但却是透明的：

enter image description here

我的3个基础层的编码如下：

<div id="main" style="width:100%; z-index:1; position:relative;">
    <div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
    <div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
    <div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>

我确实设法让一个新图层位于顶部，但它不是中心对齐的。有人可以指点我正确的方向吗？

Answer 1

这样的事情可能有所帮助： JSFiddle：http://jsfiddle.net/DSH5J/

添加：

<div id="square"></div>

#square {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    margin-top:50px;
    width:80%;
    height:100%;
    background-color:#333;
    z-index:10;
}

Answer 2

设置宽度并将margin-left和margin-right设置为auto。但这仅适用于横向。如果你想要两种方式，你就可以两种方式。

margin-left:auto;
margin-right:auto;

Answer 3

我知道以div已知宽度为中心的最简单方法是给它以下样式：

position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;

Answer 4

“把我的钱放在嘴边”：http://jsfiddle.net/YVmBU/2/

HTML：

<div id="main">
    <div id="header"></div>
    <div id="contents-box">
        <div id="contents">
            <p>Some text</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS：

#main {
}
#header {
    position: relative;
    height:100px;
    background:#151515;
    z-index: -1;
}
#contents-box {
    border: dashed grey 1px; /* for understanding only, remove it in the end */
    z-index: 1;
    margin-top: -30px;
    margin-bottom: -30px;
    /* TODO: address min-height; try only one line of text. */
    /* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
    width: 75%;
    height: 100%;
    margin: 0 auto;
    background: grey;
    z-index: 1;
}
#footer {
    position: relative;
    height:75px;
    background:#151515;
    z-index: -1;
}

唯一的问题是文本内容很少：如果在#content上使用min-height，那么当文本很少时灰色背景不会拉伸;如果使用的是静态高度N px，那么该框不会在音速上延伸。

但是如果在内容很少的情况下合并两个黑条并不重要，那么就忽略它。

删除灰色虚线边框和灰色背景;那些是帮助者 - 知道每个盒子的位置并了解正在发生的事情。

顺便说一句，位置：相对需要在z-index: -1;图层上，否则背景不会在下面。读取位置：这是因为默认情况下html中的内容有position: static，而z-index依赖于其行为的位置。
您可以在此页面中阅读相关内容：http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

Answer 5

唯一的问题是文本内容很少：如果在#content上使用min-height，那么当文本很少时灰色背景不会拉伸;如果使用的是静态高度N px，那么该框不会在音速上延伸。

但是如果在内容很少的情况下合并两个黑条并不重要，那么就忽略它。

CSS - 对齐中心

5 个答案: