为什么 img 标签会破坏行高的垂直对齐？
Why is the img tag screwing up the vertical alignment from line-height?
我试图通过将行高设置为 div 高度来垂直对齐 div 中的某些文本。当 div 中只有文本时以及 div 中有小图像时，此方法工作得很好。但由于某种原因，当 div 中的图像超过一定尺寸时，它开始将文本向下推。 Check out this fiddle我做了演示
在fiddle中有4个div，它们都有height: 40px和line-height:40px。唯一不同的是第二、三、四 div 也有小、中、大尺寸的图片：
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
那么为什么第三个第四个图像弄乱了垂直对齐方式？
您需要将 vertical-align: middle 添加到您的 img 标签中，因为它不是 inline 元素，而是 inline-block 元素。
查看更新Fiddle
注意 当您的文本超过 1 行时，您的垂直对齐方法将不起作用。用于对齐flexbox，确实有好东西:)
垂直对齐是他们从未完全正确的事情之一 - 尝试谷歌搜索一些关于它的文章。
我的第一反应是在你的每张图片上尝试 vertical-align:middle - 但不能保证 - 我总是不得不进行试验，你可能会从不同的浏览器中得到不同的结果。
我发现的唯一适用于所有浏览器的答案是创建一个 2 列 table（可能在 div 框中，但不一定）并将文本放在一个单元格中（文本自动在 table 个单元格中垂直居中）然后将匹配的图像放在下一个单元格中（它将自动扩展到图像的高度）。
table是不是很棒？ （有些人不这么认为...）
每张图片下方都有一个小space。默认情况下，图像呈现为内联（实际上它是内联块），就像一封信。它与其他字母位于同一行。该行下方有 space 表示您在 j、p 和 q 等字母上找到的下行字母。
您可以调整图像的垂直对齐方式以将其放置在其他位置。在这种情况下 vertical-align: middle; 就可以了。
这个答案详细描述了问题：
我试图通过将行高设置为 div 高度来垂直对齐 div 中的某些文本。当 div 中只有文本时以及 div 中有小图像时，此方法工作得很好。但由于某种原因，当 div 中的图像超过一定尺寸时，它开始将文本向下推。 Check out this fiddle我做了演示
在fiddle中有4个div，它们都有height: 40px和line-height:40px。唯一不同的是第二、三、四 div 也有小、中、大尺寸的图片：
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
那么为什么第三个第四个图像弄乱了垂直对齐方式？
您需要将 vertical-align: middle 添加到您的 img 标签中，因为它不是 inline 元素，而是 inline-block 元素。
查看更新Fiddle
注意 当您的文本超过 1 行时，您的垂直对齐方法将不起作用。用于对齐flexbox，确实有好东西:)
垂直对齐是他们从未完全正确的事情之一 - 尝试谷歌搜索一些关于它的文章。
我的第一反应是在你的每张图片上尝试 vertical-align:middle - 但不能保证 - 我总是不得不进行试验，你可能会从不同的浏览器中得到不同的结果。
我发现的唯一适用于所有浏览器的答案是创建一个 2 列 table（可能在 div 框中，但不一定）并将文本放在一个单元格中（文本自动在 table 个单元格中垂直居中）然后将匹配的图像放在下一个单元格中（它将自动扩展到图像的高度）。
table是不是很棒？ （有些人不这么认为...）
每张图片下方都有一个小space。默认情况下，图像呈现为内联（实际上它是内联块），就像一封信。它与其他字母位于同一行。该行下方有 space 表示您在 j、p 和 q 等字母上找到的下行字母。
您可以调整图像的垂直对齐方式以将其放置在其他位置。在这种情况下 vertical-align: middle; 就可以了。
这个答案详细描述了问题：