HTML 图片文字水平对齐四种方式

html图片文字水平对齐四种方式：

1. inline-block

效果图：

HTML：

<h4>inline block 对齐</h4>
<div class="inline-block">
    <div class="item">
        <p><img src="images/1.png"></p>
        <p>文字一</p>
    </div>
    <div class="item">
        <p><img src="images/2.png"></p>
        <p>文字二sdf321</p>
    </div>
    <div class="item">
        <p><img src="images/3.png"></p>
        <p>sdf321sdf</p>
    </div>
</div>

CSS：

.inline-block .item{
    display: inline-block;
    margin:5px;
    text-align: center;
}

2. block

效果图：

HTML：

<div class="block">
    <div class="item">
        <p><img src="images/1.png"></p>
        <p>文字一</p>
    </div>
    <div class="item">
        <p><img src="images/2.png"></p>
        <p>文字二sdf321</p>
    </div>
    <div class="item">
        <p><img src="images/3.png"></p>
        <p>sdf321sdf</p>
    </div>
</div>

CSS：

.block .item{
    float: left;
    width:33.33%;
    text-align: center;
}
.block img{
    display: block;
    margin:auto;
}

3. 背景对齐

效果图：

HTML：

<h4>背景对齐</h4>
<div class="bg">
    <div class="item item-1">
        <p>文字一</p>
    </div>
    <div class="item item-2">
        <p>文字二sdf321</p>
    </div>
    <div class="item item-3">
        <p>sdf321sdf</p>
    </div>
</div>

CSS：

.bg .item{
    width:33.33%;
    float: left;
    padding-top: 40px;
    text-align: center;
}

.bg .item-1{
    background: url("images/1.png") center center no-repeat;
}
.bg .item-2{
    background: url("images/2.png") center center no-repeat;
}
.bg .item-3{
    background: url("images/3.png") center center no-repeat;
}

4. flex对齐

效果图：

HTML：

<h4>flex对齐</h4>
<div class="flex">
    <div class="item">
        <p><img src="images/1.png"></p>
        <p>文字一</p>
    </div>
    <div class="item">
        <p><img src="images/2.png"></p>
        <p>文字二sdf321</p>
    </div>
    <div class="item">
        <p><img src="images/3.png"></p>
        <p>sdf321sdf</p>
    </div>
</div>

CSS：

.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.flex .item{
    flex:1;
}

不同的方案有不同的适应场景呢，根据需要来。

比如有的需要居中还要支持多行的，有的只要一行的。

需要兼容 PC 或者只需要处理 mobile 的。