使用CSS，即使字体大小发生变化，如何垂直对齐此图标和文本？

Question

我有两个DIV。 它们每个包含一个具有相同16x16背景图像的SPAN和另一个具有相同文本的SPAN。 唯一的区别是字体大小。 即使字体大小不同，如何垂直对齐图标和文本的中心？

我基本上想要一个带有图标和文本的元素，无论字体大小如何，该元素都可以垂直对齐。 如果有比我使用的跨度更好的方法，那也很好。

这是一个jsfiddle： https ://jsfiddle.net/nup2pwqz/

<div class='divcontainer'>
    <span class='span1'> <span>
    <span class='span2 font1'>Header<span>
</div>
<div class='divcontainer'>
    <span class='span1'> <span>
    <span class='span2 font2'>Header<span>
</div>

.font1{
        font-size: 12px;
}
.font2{
        font-size: 18px;
}
.divcontainer{
    display:inline-block;
    position:relative;
    text-align:center;
    width:200px;
    border:1px solid red;
}
.span1{
    display:inline-block;
    vertical-align:middle; 
    width:16px; 
    height:16px; 
    background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat;
}
.span2{
    padding-left:20px;
}

Answer 1

例子1

 .divcontainer{ display: inline-block; position: relative; text-align: center; width: 200px; border: 1px solid red; } .divcontainer span{ padding-left: 20px; position: relative; } .divcontainer span:before{ content: ''; position: absolute; top: 50%; left: 0; width:16px; height:16px; background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat; margin-top: -8px; } .font1{font-size: 12px;} .font2{font-size: 18px;} .font3{font-size: 28px;} .font4{font-size: 48px;} 

 <div class='divcontainer'> <span class='font1'>Header</span> </div> <div class='divcontainer'> <span class='font2'>Header</span> </div> <div class='divcontainer'> <span class='font3'>Header</span> </div> <div class='divcontainer'> <span class='font4'>Header</span> </div> 

例子2

 .divcontainer{ display: inline-block; position: relative; text-align: center; width: 200px; border: 1px solid red; } .divcontainer > span{ display:inline-block; vertical-align:middle; } .span1{ width:16px; height:16px; background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center center; } .span2{ padding-left:5px; } .font1{font-size: 12px;} .font2{font-size: 18px;} .font3{font-size: 28px;} .font4{font-size: 38px;} 

 <div class='divcontainer'> <span class='span1'></span> <span class='span2 font1'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font2'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font3'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font4'>Header</span> </div> 

Answer 2

使用line-height 。 将以下内容添加到.divcontainer块中：

.divcontainer {
    line-height: 16px;
}

Answer 3

您可以使用line-height而不是vertical-align ，如下所示（也需要为background-image-postion设置值）

.span1{
    display:inline-block;
    line-height:30px; 
    width:16px; 
    height:30px; 
    background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center;
}