Glyphicon 和 Button Text 应该并排放置

Question

我试图在按钮控件中放置一个字形图标，但按钮文本和字形图标不在同一行。按钮文字略低于下方，与字形不平行

<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

应该有 vertical-align: middle; 到你放置内联的字形范围 CSS

<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 应该并排放置

Glyphicon and Button Text should be side by side

html

twitter-bootstrap

glyphicons