，不能垂直？

图片1 span和div不能居中垂直。如果我将文本添加到div，span和div是垂直居中。想图2，为什么？

.bc { 
    background-color:red; 
    display:inline-block; 
    height:30px; 
    line-height:30px; 
    width:400px; 
} 
.tips { 
    height:30px; 
    line-height:30px; 

}

<span class="tips">SO</span><div class="bc"></div>

来源

2017-06-20 dykily

在这里分享你的代码（创建一个工作片段），也请更具体的关于这个问题 –

ok.next时间我会 – dykily

您需要垂直对齐跨度顶部。因为我看到它的“非常难”分享一些代码，我复制从图像您共享的代码，还编辑你用它

.bc { 
 
\t background-color:red; 
 
\t display:inline-block; 
 
\t height:30px; 
 
\t line-height:30px; 
 
\t width:400px; 
 
} 
 
.tips { 
 
\t height:30px; 
 
\t line-height:30px; 
 
\t vertical-align:top; 
 
}

<span class="tips">SO</span><div class="bc"></div>

来源

2017-06-20 13:00:11

我想知道是什么造成它。如果不添加“verti cal-align：top“ – dykily

@dykily span是一个'inline'元素，它不考虑'line-height'或'height'。看到这里> https://stackoverflow.com/questions/1742525/is-there-a-way-to-set-min-line-height-on-inline-element-in-css。内联元素是棘手的业务。针对您的特定问题的解决方法是将跨度对齐到顶部。阅读更多关于内联元素和他们的高度，在这里为了更好的理解 –

.bc { 
 
\t background-color:red; 
 
\t display:inline-block; 
 
\t height:30px; 
 
\t line-height:30px; 
 
\t width:400px; 
 
    float:right; 
 
} 
 
.tips { 
 

 
\t float:left; 
 
}

<span class="tips">SO</span><div class="bc"></div>

质疑

来源

2017-06-20 13:11:31

你不明白我的意思。我想知道，当添加文本到div时，span和div是垂直中心。 – dykily

嗨，请考虑添加解释给你的答案，而不是只是代码块，使他们更有帮助。我建议你环顾其他高度投票/被接受的答案。 – Matt

，不能垂直？

回答

相关问题