字形图标和按钮文本应并排答案

【问题标题】：Glyphicon and Button Text should be side by side字形图标和按钮文本应并排
【发布时间】：2015-06-26 19:10:50
【问题描述】：

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

<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>

【问题讨论】：

标签： html twitter-bootstrap glyphicons

【解决方案1】：

应该有 vertical-align: middle; 到您放置内联 CSS 的 glyphicon span

<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>

就是这样:)

【讨论】：

欢迎 :) 那么我认为你应该批准我的回答 :)

【解决方案2】：

您可以使用引导网格系统和 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>

【讨论】：

我认为这是一个相当长的解决方案......垂直对齐中间将解决问题而不是网格......
到目前为止，使用任何方法解决问题都不是好方法.. 解决方案应该是可行的.. 还有其他方法，例如将文本包装在 span 中，然后从顶部开始留出边距，但这不是好办法……