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

Question

我有两个 DIV。它们每个都包含一个具有相同 16x16 背景图像的 SPAN 和另一个具有相同文本的 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

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

.divcontainer {
    line-height: 16px;
}

Answer 2

您可以使用 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;
}

Answer 3

示例 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>

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

Using CSS, how do I vertically align this icon and text even when the font size changes?

html

css

vertical-alignment