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，绝对位置等等）。我不是要解决一般的“如何垂直对齐div”。

Answer 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将框移到靠近中心的位置。由于您在评论中询问，以下是如何使用此方法以最佳方式对齐：在容器上将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>

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

Answer 3

请使用可分割的尺寸来完成这项工作。同时删除vertical align attribue

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

使用行高的垂直对齐项目稍微偏离中间

3 个答案: