前端小问题-图文混排时

可以看到下面的截图图1，左边图片，右面是文字，就会存在文字与图像的对齐问题。我们期待的是文字不要这么靠下。最初试图通过padding and margin都没有很好的解决。

事实上，本质原因是图文混排的默认值是vertical-align:baseline.显示效果为图一。基线是在图片最底部还要靠下的位置。

当我们设置为vertical-align:middle 或者vertical-align:bottom 都可以改变文字对齐。图2是将对齐方式改为居中的效果。

虽然代码简单，但是学习之初，经常会忽略这类小问题的本质原因。

Ps:脚本之家的解释更为详尽http://m.jb51.net/css/177178.html

图1

图2