HTML中如何利用CSS让图片与文字底部对齐

问题展示

问题分析

很明显，左边图片 与 右边文字 是上下错位了的，其实呢，这是一种正常现象，因为，图片默认是与文字基线对齐的，但是，这样子不符合我们的审美啊，所以，有了以下解决方法。

解决方法

方法很简单，就是一个属性：“vertical-align: top | middle | bottom | baseline” ，最后一个是 基线 的意思，另外几个单词我就不做解释了，相信大家都明白。

写在代码里是这样的：就是给 img 标签加上这个属性，并将值设置为 bottom 即可

<img src="./imgs/address.png" style="width:18px;vertical-align: bottom;">

效果展示

是不是好看多了，哈哈哈！！！

注意

在我自己的页面里，bottom 效果好一些，大家要根据自己的情况选择合适的参数值哦！！！