先看代码：

<div class="A1">
    <img src="fj.png">
</div>

<p>看看我是否与图片水平对齐</p>

很明显目前他们是没有在同一个水平线上：

1、因为div与p元素是块级元素，而块级元素会填满整个容器空间所以把它们变为行内块级元素

.A1,p{
    display: inline-block;   //块级元素变为行内块级元素
}

看上图看上去好像还是没有对齐呀，没有在一个水平线上，字体部分明显要高于图片。

2、对图片设置一个对齐方式，现在我们要水平对齐，那么直接对img设置一个vertical-align: bottom;就可以了