垂直居中的实现方式

2016-12-27  本文已影响0人  饥人谷_小霾

记性不行隔几天拿出来看一眼

适合单行文字的垂直居中,只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度

Paste_Image.png
img图片也可以用line-height垂直居中
包含图片的父元素设置line-height,img设为verticla-align: middle
Paste_Image.png

同样还有将父元素转化为table属性结合上文实现垂直居中

Paste_Image.png

父容器宽高不固定,子元素需要在父亲内容绝对居中的时候,可以用绝对定位+负边框。


Paste_Image.png
上一篇 下一篇

猜你喜欢

热点阅读