Vertical align middle on inline elements slightly off

2018-06-14 14:29:43

This question already has an answer here:

Vertically align text next to an image? 20 answers

How do I vertically center text with CSS? 34 answers

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

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

Add to .icon

  position: relative;
  left: -2px;

This will move it two pixels to the left from where it originally was.

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/41536.html