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

问题展示

问题分析

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

解决方法

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

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

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

效果展示

是不是好看多了,哈哈哈!!!

注意

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

猜你喜欢

转载自blog.csdn.net/qq_41885673/article/details/114270314