图片和文字居中对齐的三种方式

---

图片浮动，文字加边距

实现图：

实现代码：

<div class="box">
    <img src="imgs/img1.PNG" alt="">
    <p>哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</div>

.box {
    background: #16b6b6;
    height: 500px;
}

.box img {
    float: left;
}

.box p {
    padding-top: 10px;
    padding-left: 50px;
}

这个方法比较简单好理解，先浮动 img，让图片和文字同处一行，然后通过 padding 调整文字位置使其居中，不过这里因为浮动元素脱离文档流，所以文字的左边距还需要加上图片的宽度。文字也可以使用 margin，但是要为父元素设置 border，不然 margin 会和父元素合并，变成父盒子与其他盒子的外边距。

把图片设做 background

实现代码：

<div class="box">
    <p>哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</div>

.box {
    background: #16b6b6;
    height: 500px;
}

.box p {
    height: 40px;
    background: url(one/images/header2.png) no-repeat;
    padding-top: 10px;
    padding-left: 50px;
}

这种方法是将图片和文字看作一个整体，把图片当作文字的背景图展示，然后给文字部分设置 padding 添加和图片之间的距离。不过这种方法如果文字部分是行内元素的话，是要设置布局为块元素，然后添加宽高属性才能设置背景图的。

利用 vertical-align

这个属性还要分几种情况：

盒子高度由图片撑起

实现图：

实现代码：

<div class="box">
    <img src="imgs/img2.PNG" alt="">
    <p>哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</div>

.box {
    background: #16b6b6;
}

.box img {
    vertical-align: middle;
}

.box p {
    display: inline-block;
}

当容器盒子高度完全由图片撑起来时，文字的行高也跟随盒子高度自适应，所以只要设置图片垂直对齐方式 vertical-align 为中线 middle，图片和文字就能够居中对齐。如果这里文字部分不是 p 这种块元素，而只是一个行内元素的话，就可以省略掉 display: inline-block 属性，只需要 vertical-align: middle 一条属性就够了，十分简洁。

盒子高度大于图片

实现图：

实现代码：

<div class="box">
    <img src="one/images/course3.png" alt="">
    <p>哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</div>

.box {
    background: #16b6b6;
    height: 500px;
    line-height: 500px;
}

.box img {
    vertical-align: middle;
}

.box p {
    display: inline-block;
}

这种方法主要涉及到 line-height 与 vertical-align 的关系，可以在 上篇文章 理清他们的关系。