Question

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

CSS：

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

HTML：

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

http://jsfiddle.net/jBF45/

Answer 1

听起来你正在寻找的是CSS line-height property。我在这里创建了一个工作示例：http://jsfiddle.net/DCX4G/。

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

CSS：

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 */
}

HTML：

<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

对齐文本垂直中心的文本

1 个答案: