/ 前端基础

图片和文字水平对齐的方法

写页面的时候,经常遇到一个小图标图片需要和文字放在一起,包裹在一个父容器中,但是图片总是顶部和父容器顶端靠在一起,这样就导致图片总是比文字高上一点,这个问题遇到了很多次,之前没有进行总结,总是花式地把它们对齐在一起,比如手动调整margin-top,写定像素,把他们调到水平对齐,但这样既不优雅,也不安全,比如当高度为百分比或者em/rem时,margin-top的值也要以相同的形式去写,但是这种形式,是不够绝对精确的。

所以在此记录下我现在和以后使用过的“较优雅且安全的”图片和文字水平对齐的方法:

  1. 对图片设置vertical-align: text-bottom;