css 单行图片文字水平垂直居中汇总

标签：pre   水平垂直   背景图   log   flex   repeat   添加   技术分享   推荐   

(1) 水平居中

a. 行内元素水平居中

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

<div style="width: 600px; height: 300px; border:1px solid red;text-align: center;" >
    <img src="static/images/banner.png" style="width: 200px; height: 200px;">
</div>

b. 块级元素水平居中

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

<div style="width: 600px; height: 300px; border:1px solid red;" >
    <img src="static/images/banner.png" style="width: 200px; height: 200px; display: block; margin: 0 auto;">
</div>

(2) 垂直居中

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

.bg-center{
    background:url(‘static/images/banner.png‘) no-repeat;
    background-size: 200px 200px;
    background-position: center center;
}

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

<div style="width: 600px; height: 600px; border:1px solid red; position: relative" >
    <img src="static/images/banner.png" style="width: 200px; height: 200px; position: absolute; left: 200px;top:200px;">
</div>

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

(3) 图片文字垂直居中

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

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

<div style="width: 300px;height: 60px; border:1px solid red; display: flex;align-items: center;">
    <div style="flex:0 0 48px;border:1px solid green;font-size: 0;">
        <img src="static/images/banner.png" style="width: 48px;height: 48px; ">
    </div>
    <div style="flex: 1;border:1px solid green;">abc123我是</div>
</div>

效果图：

1. 背景图片形式（推荐方式）

<div style="width: 300px;height: 60px; border:1px solid red; background: url(‘static/images/banner.png‘) no-repeat;background-size: 48px 48px; background-position: left center; padding-left: 48px; line-height: 60px;">
    abc123我是
</div>

效果图：

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

<div style="width: 300px;height: 60px; border:1px solid red;line-height: 60px; font-size: 0;">
    <img src="static/images/banner.png" style="width: 48px;height: 48px; vertical-align: middle;">
</div>

效果图：

好了到此结束。

css 单行图片文字水平垂直居中汇总

标签：pre   水平垂直   背景图   log   flex   repeat   添加   技术分享   推荐   

原文地址：https://www.cnblogs.com/cuiguoliang/p/9983588.html