我在另一个 div 中有两个 div,我想将子 div 居中。那么,请问我该怎么做?
#father {
position: relative;
}
#son1 {
position: absolute;
width:285px;
}
#son2 {
position: absolute;
width:285px;
}
最佳答案
首先,您为子元素设置了 50% 的剩余空间。现在子元素的左侧位于其父元素的中间。因此,为了使子元素的中心位于其父元素的中心,设置其半宽的负左边距 (285/2 = 142.5)。 对不起我的英语不好!
#son1, #son2 {
position: absolute;
left: 50%;
margin-left: -142.5px;
}
编辑
为了让子元素在它们的父元素中居中,并让子元素彼此相邻,检查这个:
#father {
width: 100%;
height: 200px;
position: relative;
padding-top: 50px;
background-color: #ccc;
}
#child-wrapper {
width: 580px;
position: absolute;
left: 50%;
margin-left: -290px;
}
#child-wrapper > div:first-child {
margin-right: 10px;
}
#child-wrapper > div {
background: #f1f1f1;
}
#son1, #son2 {
width: 285px;
padding: 20px 0;
float: left;
text-align: center;
}
<div id="father">
<div id="child-wrapper">
<div id="son1">Son1</div>
<div id="son2">Son2</div>
</div>
</div>
关于javascript - 如何以绝对位置让 child 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27127149/