Twitter bootstrap 在文本的垂直中心对齐文本

当字体大小不同时，如何向图标添加填充（或向文本添加负填充），使文本垂直于按钮中的图标居中

CSS:

HTML:

---

听起来你要找的是。我在这里创建了一个工作示例：

只要将行高设置为CSS类btn fa的字体大小，它就应该垂直居中

CSS:

HTML:

字体大小：20px（.btn字体大小）

字体大小：30px

字号：25px

字体大小：10px

字号：5px

用

行高进行实验

。在哪门课上？我尝试将其添加到btn和fa中，但没有得到任何有用的效果

.btn {
    font-size: 20px;
    width: 200px;
    text-align: center;
}
.btn .fa {
    font-size: 40px;
}

<a href="#" class="btn btn-primary" role="button"><i class="fa fa-stack-overflow"></i> Text</a>

body {
    padding: 20px;
}
.btn {
    font-size: 20px;
    width: 200px;
    text-align: center;
}

.btn .fa {
    font-size: 40px;
}

.fa-centered {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;    /* This needs to be the same as .btn .fa font-size */
}

<a href="#" class="btn btn-primary" role="button">
    <i class="fa fa-stack-overflow"></i>
    <div class="fa-centered">Text</div>
</a> Font Size: 20px ( .btn font-size )
<hr />
<a href="#" class="btn btn-primary" role="button">
    <i class="fa fa-stack-overflow"></i>
    <div class="fa-centered" style="font-size: 30px;">Text</div>
</a> Font Size: 30px
<hr />
<a href="#" class="btn btn-primary" role="button">
    <i class="fa fa-stack-overflow"></i>
    <div class="fa-centered" style="font-size: 25px;">Text</div>
</a> Font Size: 25px
<hr />
<a href="#" class="btn btn-primary" role="button">
    <i class="fa fa-stack-overflow"></i>
    <div class="fa-centered" style="font-size: 10px;">Text</div>
</a> Font Size: 10px
<hr />
<a href="#" class="btn btn-primary" role="button">
    <i class="fa fa-stack-overflow"></i>
    <div class="fa-centered" style="font-size: 5px;">Text</div>
</a> Font Size: 5px