问题描述:我们怎样在一个 <div> 中水平居中另一个 <div>
<div id="outer">
<div id="inner">Foo foo</div>
</div>
解决方法:可以给内部的
<div>
添加下面的CSS样式:
#inner {
width: 50%;
margin: 0 auto;
}
当然,并不是必须设置width: 50%;
,任何小于子div的宽度都可以。margin: 0 auto;
才是关键。
如果你要兼容IE8及以上的浏览器,下面的方式可以更好的替代:
#inner {
display: table;
margin: 0 auto;
}
它能使内部元素水平居中,而不需要设置width
属性。如果你不想给子div一个固定的宽,可以使用下面的方式:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
这使得内部div成为可以以文本对齐为中心的内联元素。
本文链接:https://www.coder.work/article/3343555 转载请保留出处。