使用 line-height 垂直对齐的项目稍微偏离中间答案

【问题标题】：Vertically aligned item using line-height is slightly off middle使用 line-height 垂直对齐的项目稍微偏离中间
【发布时间】：2016-05-19 05:12:43
【问题描述】：

在这种使用 line-height 和 inline-block 的风格中，为什么绿色项比中间低几个像素？上下不应该正好有15px吗？

.container{
  height: 45px; 
  line-height: 45px; 
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 15px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block
}

<div class="container">
  <div class="item">
  </div>
</div>

我知道还有其他垂直对齐项目的方法（包括 JS、绝对位置等等）。我不是要解决一般的“如何垂直对齐 div”。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

这里的罪魁祸首不是line-height，而是vertical-align: middle。它会尝试将您的框与假设在父框内的文本对齐。内框的最终位置取决于该文本的font-size。您可以通过增加其父级的字体大小将框进一步向下推：

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 45px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

如您所见，文本更接近其容器的底部而不是顶部（“j”溢出容器，而“b”没有）。

同样，您可以通过减小font-size 将框移到更靠近中心的位置。既然您在 cmets 中询问过，以下是使用此方法使其居中的最佳方法：在容器上将 font-size 设置为 0。

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 0px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

【讨论】：

我不是在问文字。而且您的代码 sn-p 中的绿色框也没有居中。
你问为什么盒子没有居中。这就是原因。我的示例中的框比您的框less居中，因为我增加了字体大小。无论是否有任何文本，行高的工作方式都是相同的。
太棒了。我接受这个 - 你能编辑它，让它专注于字体大小吗？

【解决方案2】：

改变你的风格可能会对你有所帮助

.container {
    background-color: #ff0000;
    display: table-cell;
    height: 45px;
    vertical-align: middle;
}
.item {
    background-color: #008000;
    display: table-cell;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

【讨论】：

谢谢，这是另一种可行的解决方案。我编辑了我的问题，以澄清问题出在 inline-block 元素上。 table-cell 完全是另外一回事......

【解决方案3】：

请使用可分割的大小来完成这项工作。同时删除垂直对齐属性

https://jsfiddle.net/guc6uxc7/

.container{
 height: 42px; 
 line-height: 42px; 
 background-color: red; 
 display: inline-block
 }

 .item{
 height: 12px; 
 width: 12px; 
 background-color: green; 
 display: inline-block;
 }

【讨论】：