在这种使用 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”。
最佳答案
这里的罪魁祸首不是 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>
关于html - 使用 line-height 的垂直对齐元素稍微偏离中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35288305/