mickeyort 发表于 2021-3-13 10:24:29

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

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

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

常见方法有3种:

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

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

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

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




页: [1]
查看完整版本: CSS控制图片和文字在同一行显示且对齐的3种方法