我有麻烦垂直对齐一个字体真棒图标与按钮下的引导框架下的文本。我试过这么多东西,包括设置行高,但没有什么工作。
<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>
我如何得到这个工作?
解决方法
有一个规则由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/其输出为:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。