html字体在图片上居中代码,css 单行图片文字水平垂直居中汇总(示例代码)

(1) 水平居中

a. 行内元素水平居中

因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可，例如：

b. 块级元素水平居中

块级元素定宽后设置margin:0 auto(第一个数值视情况而定)即可，例如

(2) 垂直居中

作为背景图片定好宽高，设置background属性 ，例如

.bg-center{

background:url(‘static/images/banner.png‘) no-repeat;

background-size: 200px 200px;

background-position: center center;

}

非背景图设置图片position:absolute; 设置left top 距离即可，例如

注：如果子元素绝对定位父级需要添加position:relative 样式。

(3) 图片文字垂直居中

flex方式(要求支持flex) 例:

兼容性：https://blog.csdn.net/m0_37142141/article/details/79709747

效果图：

背景图片形式(推荐方式)

效果图：

如果只有图片没有文字的话可以参照(2)中的方法，另外下面代码也可以实现

效果图：

好了到此结束。