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

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

添加到.icon

  position: relative;
  left: -2px;

这会将它从原来的位置向左移动两个像素。

p {
  font: 10pt Arial, sans-serif;
}
.icon {
  vertical-align: middle;
  position: relative;
  left: -2px;
}

<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 2

我认为这是你最好的解决方案：

.icon {
  vertical-align: middle;
  padding-bottom: 3px;
}

希望对您有所帮助 ;)

Answer 3

试试 vertical-align: text-top;.

p {
  font: 10pt Arial, sans-serif;
}
.icon {
  vertical-align: text-top;
}

<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 4

这是因为浏览器用户代理将默认值 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>

Answer 5

p {
  font: 10pt Arial, sans-serif;
}
.icon {
  vertical-align: sub;
}

<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 middle on inline elements slightly off