垂直对齐内联元素的中间稍微偏离[重复]

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>

Answer 2

试试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 3

添加到.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 4

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

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

其他可能的解决方案：https://github.com/google/material-design-icons/issues/206

希望这会有所帮助；）

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>