关于垂直居中,在一行中有img/span/inline-block,我们可以通过设置元素的vertical-align:middle;让元素垂直对齐,但是我发现浮动会破坏这种属性。
如果我们将其中一个元素设置成浮动属性(float:left/right;),就不会垂直居中对齐了!
有木有什么方法可以解决这个问题,还是说需要使用其他的方法垂直居中对齐。
在知道高度的情况下position:absolute;top:50%;margin-top:-height/2;
2.在不知道高度的情况下:position:absolute;top:50%;tansform:translate(0,-50%)
3.还有一个就是flex的middle
你可以试试这种方法:
<div class="parentBox">
<div class="childBox">
<!--content-->
</div>
</div>
.parenBox {display: table;}
.childBox {
display: table-cell;
vertical-align: middle;
}
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
可以看看我翻译的文章《你所不知道的 CSS - 居中》传送门
这个属性是针对内联元素的,如果设置浮动,元素就会block化,所以不会生效;关于垂直居中的问题,建议百度了解一下。