垂直对齐的 inline-block 元素在容器内未完全居中答案

【问题标题】：Vertically-aligned inline-block element not perfectly centered within container垂直对齐的 inline-block 元素在容器内未完全居中
【发布时间】：2023-03-09 01:15:01
【问题描述】：

我正在尝试使用 vertical-align: middle 在某些文本中垂直居中 inline-block 元素。

p {
  background: red;
  line-height: 20px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}

<p>
  <span></span>
  &lt;-- Not perfectly aligned
</p>

请注意，该元素不是完全居中的……这是为什么呢？这是一个浏览器的问题吗？它在 WebKit 浏览器（Chrome、Safari）上重现。

【问题讨论】：

有了 4.5k 代表，您肯定知道您应该在问题中包含代码，而不仅仅是向我们发送链接以了解您的问题。
对不起伙计，之前没有真正使用过SO嵌入代码sn-p。已添加。
感谢您的链接——我看到了那个帖子，我认为这是一个不同的问题。 vertical-align: middle 在我的情况下是“工作”，它只是不是像素完美的。 FWIW，在 FF 中更好。
相关：stackoverflow.com/a/57832839/8620333 / stackoverflow.com/a/54190413/8620333 ... 中间不像你想的那样工作
我不相信vertical-align能达到你想要的效果。会考虑 flexbox 即将父 css 设置为：'display:flex' 和 'align-items:center'

标签： html css

【解决方案1】：

vertical-align: middle; 从来没有打算让元素居中。这是一个更简单的示例，以便更好地查看：

p {
  background: 
    linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */
    red;
  line-height: 80px;
  font-size:80px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}

<p>
  <span></span>
  &lt;-- Not aligned
</p>

将元素的中间与基线加上父元素的 x 高度的一半对齐 ^ref

Vertical align not working on inline-block

Vertical-align aligns everything else except self

https://stackoverflow.com/a/54190413/8620333

【讨论】：

【解决方案2】：

您的代码有 cmets 并且文本不在 span 中。试试这个：

<p>
  <span>Not perfectly aligned</span>
</p>


p {
  background: red;
}

span {
  display: inline-block;
  background: lightblue;
  vertical-align: top;
}

【讨论】：

我认为投反对票是因为您不理解这个问题。文本并不意味着在跨度中。跨度应该是一个单独的方形视觉对象，用于演示垂直对齐如何无法正常工作。此外，代码中没有 cmets。
好的，但一开始不是这样，是评论，但编辑后变成现在这样，nvm，没问题