图片与文字水平对齐

　　先看代码：

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

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

图片与文字水平对齐

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

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

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

图片与文字水平对齐

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

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

图片与文字水平对齐

本文地址：https://focusonseo.cn/css/62.html

文章声明：以上内容(如有图片或视频亦包括在内)除非注明，否则均为重庆seo博客原创文章，转载或复制请以超链接形式并注明出处。