要使一个HTML元素居中,我可以使用CSS left: 50%;
。但是,这会使元素相对于整个窗口居中。
我有一个元素,它是一个<div>
元素的子元素,我希望该子元素相对于这个父<div>
居中,而不是整个窗口。
我不希望容器<div>
的所有内容都居中,只有一个特定的子级。
发布于 2011-07-25 06:02:28
将text-align:center;
设置为父div,将margin:auto;
设置为子div。
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}
<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>
这是一个很好的资源,可以将所有东西集中在一起。
发布于 2011-07-25 06:01:46
父div上的text-align:center;
应该可以做到这一点
发布于 2019-06-24 11:16:01
要仅使特定子项居中,请执行以下操作:
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}
<div class="parent">
<span class="child">hi</span>
</div>
或者,您也可以使用flex,但这将使所有子项居中
.parent {
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: white;
}
<div class="parent">
<span class="child">hi</span>
</div>
https://stackoverflow.com/questions/6810031
复制相似问题