Question

我正在尝试在按钮控件中放置一个glyphicon，但按钮文本和glyphicon不会出现在同一行。按钮文字略低于下方，与glyphicon不平行

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    My Button Text
</button>

Answer 1

对于放置内联CSS的位置，应该有vertical-align: middle;到glyphicon的范围

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px; vertical-align: middle;" aria-hidden="true"></span>
       My Button Text
</button>

那就是：）

Answer 2

您可以使用bootstrap网格系统和css，如下所示：

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <div class="col-md-2">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    </div>
   <div class="col-md-10" style="padding-top:5px;  margin-left: -4px">
   My Button Text
   </div>
</button>

Glyphicon和Button Text应该并排

2 个答案: