CSS - 对齐中心

我终于试图取消表格并使用CSS。CSS - 对齐中心

我有3个DIV组成了三层布局：标题，正文和页脚。我现在试图在这些图层的顶部覆盖一个900像素宽的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>

我确实设法让一个新的图层坐在上面，但它不是居中对齐。请有人指点我正确的方向？

来源

2012-01-23 TheCarver

一些提示： 1）默认情况下，除非另有说明，DIV均为100％宽度。 2）position：relative用于为绝对定位的孩子设置一个新的定位点 - 你没有。 –

感谢提示@Diodeus，非常感谢。我删除了绝对定位的儿童为这个例子，但有用的知道宽度是100％作为默认.. – TheCarver

服用点这样可以帮助：

的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; 
}

来源

2012-01-23 16:12:11 dg90

谢谢，这是完美的。 – TheCarver

-1：将文本添加到#contents，它进入错误的地方。 – ANeves

@ANeves - 可以解释你的意思吗？ – TheCarver

，我知道

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

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

来源

2012-01-23 16:10:51 Chowlett

设置宽度和s等边距和自动边距。不过，这只是水平的。如果你想要两种方式，你只需要两种方法。

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

来源

2012-01-23 16:13:32 Prnth

哦是啊...看到我自己的问题http://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0 -auto到工作 – Chowlett

“把我的钱在我的嘴”：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上使用最小高度，那么当文本很少时，灰色背景不会伸展;如果使用N px的静态高度，那么该盒子不会绷紧。

但是，如果两条黑条合并时内容很少并不重要，那就忽略它吧。

删除灰色的虚线边框和灰色背景;那些人是助手 - 要知道每个盒子在哪里，并了解正在发生的事情。

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

来源

2012-01-23 16:50:16 ANeves

唯一的问题是一些文本内容：如果最小高度是在＃内容使用，那么灰色背景并不时有几个文本舒展;如果使用N px的静态高度，那么该盒子不会绷紧。

但是，如果两条黑条合并时内容很少并不重要，那就忽略它吧。

来源

2013-11-05 09:33:26 DWQQ

CSS - 对齐中心

回答

相关问题