我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
Firefox 和 Chrome:
<div style="width:100%;"> <div style="width: 50%; margin: 0px auto;"> 文本</div> </div>
适用于 Internet Explorer、Firefox 和 Chrome:
<div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div>
文本同步:属性是现代浏览器的可选,但在 Internet Explorer Quirks 模式中需要继承浏览器的支持。
其他回答
#inner {
width: 50%;
margin: 0 auto;
}
我知道我稍晚回答这个问题,我没有打扰阅读每一个答案,所以这可能是一个重复。
inner { width: 50%; background-color: Khaki; margin: 0 auto; }
它不能集中,如果你不给它一个宽度,否则,它将采取,默认情况下,整个水平空间。
使用下面的 CSS 内容为 #inner div:
#inner {
width: 50%;
margin-left: 25%;
}
我主要使用这个CSS内容为中心Divs。
最熟悉的方式,它是广泛使用和工作在许多浏览器,包括旧的,是使用边界如下:
#parent { 宽度: 100%; 背景颜色: #CCCCCC; } #child { 宽度: 30%; /* 我们需要宽度 */ 边缘: 0 自动; /* 这是魔法 */ 颜色: #FFFFFF; 背景颜色: #000000; 粘贴: 10px; 文本平衡: 中心; } <div id="parent"> <div id="child"> 我是孩子,我是水平中心! 我的爸爸是一个灰色的 div dude!</div> </div>
运行代码以查看它是如何工作的. 此外,有两个重要的事情你不应该忘记在你的CSS,当你试图以这种方式集中: 边缘: 0 自动;. 这使它是 div 中心,如你想要的。
