CSS控制图片和文字在同一行显示且对齐的3种方法

mickeyort

在 HTML 代码中，有时会需要在文字旁边加上一个图标。

默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。

常见方法有3种：

1、通过添加css的 “vertical-align:middle;” (给文字/图片添加皆可 , 推荐图片)；

2、如果图片是背景图片，可以在css中设置背景图片；

3、把文字和图片分别放入不同的div中。(实测不管用 , 除非给DIV加入 vertical-align:middle;)

上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。