html - 为什么 img 标签会破坏行高的垂直对齐？

Question

我试图通过将行高设置为等于 div 高度来垂直对齐 div 中的某些文本。当 div 中只有文本时，以及当 div 中有小图像时，这都很好用。但出于某种原因，当 div 中的图像超过一定尺寸时，它开始将文本向下推。 Check out this fiddle我做了演示。

在 fiddle 中有 4 个 div，它们都有 height: 40px 和 line-height:40px。唯一的区别是第 2、3 和 4 个 div 也有大小为小、中和大的图像:

 .small{height:20px;}
 .medium{height:30px;}
 .large{height:40px;}

那么为什么第三个第四个图像弄乱了垂直对齐方式？

Answer 1

您需要将 vertical-align: middle 添加到您的 img 标签中，因为它不是 inline 元素，它是 inline-block 元素。

查看更新 Fiddle

请注意，当您的文本超过 1 行时，您的垂直对齐方法将不起作用。用于对齐flexbox，真是好东西:)