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

Question

在这种使用 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、绝对位置等）。我不是要解决一般问题 "how to vertically align a div".

Answer 1

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

.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;
}

Answer 2

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

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;
 }

Answer 3

这里的罪魁祸首不是 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可以将方框向中心靠拢。由于您在评论中提出了问题，以下是使用此方法使其最佳居中的方法：在容器上将 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>

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

Vertically aligned item using line-height is slightly off middle

html

css

vertical-alignment