我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
我创建了这个例子,以表明如何垂直和水平地调整。
这个代码基本上就是这样:
#outer {
position: relative;
}
和...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
它会留在中心,即使你重新启动屏幕。
其他回答
它不能集中,如果你不给它一个宽度,否则,它将采取,默认情况下,整个水平空间。
要在中间调整一个 div 中间的 div -
.outer{ 宽度: 300px; /* 例如 */ 高度: 300px; /* 例如 */ 背景: 红色; }.inner{ 位置: 相对; 顶部: 50%; 左: 50%; 转换: 翻译(-50%, -50%); 宽度: 200px; 高度: 200px; 背景: 黄色; } <body> <div class='outer'> <div class='inner'></div> </div> </body>
这将使中间的内部迪夫均匀,垂直和水平。
根据您的情况,最简单的解决方案可能是:
margin: 0 auto; float: none;
HTML:
<div id="outer">
<div id="inner">
</div>
</div>
CSS:
#outer{
width: 500px;
background-color: #000;
height: 500px
}
#inner{
background-color: #333;
margin: 0 auto;
width: 50%;
height: 250px;
}
菲德尔
是的,这是一个短暂而干净的水平调整代码。
.classname {
display: box;
margin: 0 auto;
width: 500px /* Width set as per your requirement. */;
}