中心Twitter引导3button中的字形

我现在正在使用Twitter Bootstrap 3 RC2以及Twitter Bootstrap，它已经进入了一个独立的存储库。 我注意到，如果在带有文本的button中使用图标不是很好居中：

图标和文字有相同的底线，但我相信对于一个好看的button，图标应该基于文本居中，不是吗？ 任何想法如何实现这一目标？

http://bootply.com/74652

Answer 1

使用graphics将文本移出<span> ，然后将vertical-align:middle移至<span>

  <button class="btn btn-default"> <span class="glyphicon glyphicon-th" style="vertical-align:middle"></span> Centered </button> 

演示

Answer 2

应用vertical-align: -{N}px; 样式在。glyphicon-th上将其向上/向下移动N个像素。

Answer 3

对于一些垂直alignment可能无法正常工作，因为定位：如果你看看.glyphicon类，你会看到它被设置为相对，尝试将其设置为“inheritance”，例如：

 .glyphicon.v-centered { position: inherit; vertical-align: middle; } 

这也适用于不在button中的图标，例如标签。

Answer 4

尝试vertical-align: middle; .glyphicon-th:before

Answer 5

上面的方法本身都不是很好，但是使用display: inline-block; vertical-align: middle display: inline-block; vertical-align: middle元素上的display: inline-block; vertical-align: middle 。 这是inline-block ，似乎是关键。

 .vcenter * { vertical-align: middle; display: inline-block; } .btn i { margin-left: 10px; font-size: 20px; } 

同

 <div class="vcenter"> <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> </div> 

请参阅http://www.bootply.com/UbY78zM8pD作为实例。;

Answer 6

我设法做到这一点：

 .glyphicon.center:before { vertical-align: middle; } 

并使用<span class="glyphicon center glyphicon-th"></span> 。

Answer 7

 <button class="btn btn-default"> <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span> <span style="font-size: 17px;">Not Centered</span> </button> 

请根据您的要求增加或减less字体大小

Answer 8

另一种方式

 <button class="btn default" id="IdBack"> <i class="glyphicon glyphicon-hand-left"></i> <b>Back</b> </button> 

Answer 9

添加特定像素或百分比的边距。 在我的应用程序，这个工作很好，基于该地区的规模。

CSS：

 .someWrapperClass button span { margin-top: 120%; } 

HTML：

 <div class="someWrapperClass"> <button type="button" ng-click="SomeMethod()"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div>