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

2018-06-14 14:29:42

这个问题在这里已经有了答案：

垂直对齐图像旁边的文字？ 20个答案

我如何垂直居中文本与CSS？ 34个答案

那么这是因为默认的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: 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>

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

链接地址: http://www.djcxy.com/p/41535.html