设置行高
我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致。
其次最重要的是设置图片元素的vertical-align属性为middle,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。
代码示例:
使用定位和translate
具体方式是先使用定位让图片向右和向下偏移父元素的50%,再相对自身向左和向上偏移50%,这样就实现图片在父元素水平垂直居中了。
代码示例:
使用弹性盒子
设置图片元素的父盒子为弹性盒子,让项目在主轴和侧轴的排列方式都居中。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。