Bootstrap Glyphicon 垂直对齐答案

【问题标题】：Bootstrap Glyphicon Vertical AlignBootstrap Glyphicon 垂直对齐
【发布时间】：2015-10-02 02:04:20
【问题描述】：

是否可以重新定位字形图标以使其显示在以下文本的“人眼”中心？

解释一下，我的意思是：

我尝试了“大字形”，但没有任何区别。是否有一些内置功能可以解决这个问题，或者我可以手动添加哪些 CSS。

代码片段以便更好地查看：

<link href="http://holdirbootstrap.de/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://holdirbootstrap.de/dist/js/bootstrap.min.js"></script>

<div class="row" style="width:1200px;">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Lunatics Car Club Austria
                </h1>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;&nbsp;Über den Verein</h4>
                    </div>
                    <div class="panel-body">
                        <p>Wir sind ein bei der Bezirkshauptmannschaft Vöcklabruck <strong>eingetragener Club/Verein</strong> mit dem offiziellen Vereinsnamen &quot;Lunatics Auto Club Österreich&quot;.<br>
                          <br>
                        </p>
                        <a href="#" class="btn btn-default">Vereinsinformationen + Downloads </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;&nbsp;Mitglieder</h4>
                    </div>
                    <div class="panel-body">
                        <p>Wir zählen 45 aktive Mitglieder mit XX Autos und insgesamt 5200PS aus dem Großraum Vöcklabruck.                        <br>
                          <br>
                        Unser Vorstand besteht aus 6 Mitgliedern.<br /><br /></p>
                        <a href="#" class="btn btn-default">Mitgliederprofile + Fahrzeugdetails</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><span class="glyphicon glyphicon-road" aria-hidden="true"></span>&nbsp;&nbsp;Der Weg zu uns</h4>
                    </div>
                    <div class="panel-body">
                        <p>Hast du Lust, dich unserem Club anzuschliessen, und teilst unsere Begeisterung für Autos sowie das Clubleben gleichermaßen?<br>
                          <br>
                          Zögere nicht, und bewirb dich!</p>
                        <a href="#" class="btn btn-default">Kriterien + Formular</a>
                    </div>
                </div>
            </div>
        </div>

【问题讨论】：

尝试将相同的min-height 和line-height 分配给glyphicon-large。 Here 是详细信息。

标签： jquery twitter-bootstrap css glyphicons

【解决方案1】：

最快的设置方法是将标题更改为 2 个span 标签，然后传递一个使用table-cell CSS 属性的.tblcell 类。

HTML

<h4>
    <span class="tblcell glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    <span class="tblcell">Über den Verein</span>
</h4>

CSS

.glyphicon {
    position: static;
    padding-right: 10px;
}
.tblcell {
    display: table-cell;
    vertical-align: middle;
}

我也建议不要使用' '您用于填充的字符，只需使用实际的 CSS 填充（这是我在您的 glyphicon 类中所做的）

这是JS.Fiddle with your example。更改仅应用于您的第一个标题。希望对您有所帮助。

【讨论】：