中心Twitter引导3button中的字形

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

在这里输入图像说明

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

http://bootply.com/74652

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

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

演示

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

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

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

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

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

上面的方法本身都不是很好,但是使用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作为实例。;

我设法做到这一点:

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

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

 <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字体大小

另一种方式

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

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

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>