我正在寻找一种使图像垂直居中的方法,类似于text-align center
。text-align
center有点有效,因为您无需指定父级或子级的宽度,它将自动将其内容居中。还有其他方法可以做类似的事情来垂直放置图像吗?
您可以通过2种方式来做到这一点
方法1(首选),通过使用display: table-cell
div {
display: table-cell;
height: 100px;
border: 1px solid #f00;
vertical-align: middle;
}
方式2,使用position: absolute;
和,然后使用top: 50%
减去height
图像总数的1/2margin-top
div {
height: 100px;
border: 1px solid #f00;
position: relative;
}
div img {
position: absolute;
top: 50%;
margin-top: -24px; /* half of total height of image */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句