【问题标题】: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 中,然后从顶部开始留出边距,但这不是好办法……
    猜你喜欢
    • 2018-09-01
    • 2014-05-04
    • 2015-08-28
    • 1970-01-01
    • 2014-04-04
    • 1970-01-01
    • 1970-01-01
    • 2023-02-07
    • 1970-01-01
    相关资源
    最近更新 更多