稍微偏离内联元素的垂直对齐中间

Question

当我尝试vertical-align: middle使用<img>某个文本旁边的图标 ( ) 时，该图标总是有点太低（参见示例）。我该如何解决这个问题，使其与文本垂直居中。

例子：

p {
  font: 10pt Arial, sans-serif;
}

.icon {
  vertical-align: middle;
}

<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>

Answer 1

嗯，这是因为line-height浏览器用户代理将默认值应用于元素......所以你必须使用一些vertical-align值......使用text-bottom

p {
  font: 10pt Arial, sans-serif;
}

.icon {
  vertical-align: text-bottom;
}

<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>

好吧，如果您不想在 上花费太多时间vertical-align，只需使用 flexbox

p {
  display: flex;
  align-items: center;
  font: 10pt Arial, sans-serif;
}

<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>