twitter-bootstrap – 文本和图标在引导按钮中的垂直对齐

发布时间：2020-12-17 23:57:16 所属栏目：安全来源：网络整理

导读：我有麻烦垂直对齐一个字体真棒图标与按钮下的引导框架下的文本。我试过这么多东西，包括设置行高，但没有什么工作。 button id="edit-listing-form-house_Continue" class="btn btn-large btn-primary" style="" value="" name="Continue" type="submit" Con

我有麻烦垂直对齐一个字体真棒图标与按钮下的引导框架下的文本。我试过这么多东西，包括设置行高，但没有什么工作。

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

我如何得到这个工作？

解决方法

有一个规则由font-awesome.css设置，您需要覆盖它。

您应该在CSS文件中设置覆盖，而不是内联，但本质上，icon-ok类设置为vertical-align：baseline;默认情况下，我已经在这里纠正：

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

示例：http://jsfiddle.net/fPXFY/4/，其输出为：

我在这个例子中将上面图标的字体大小缩小到30像素，因为对于按钮的大小来说，它感觉太大，为40像素，但这纯粹是个人观点。您可以增加按钮上的填充，以便在需要时进行补偿：

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

生产：http://jsfiddle.net/fPXFY/5/其输出为：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!