Bootstrap 字形垂直对齐

Question

是否可以重新定位字形图标，使其显示在以下文本的 "human-eye" 中心？

解释一下，我的意思：

我试过 "large-glyphicon"，但没什么区别。是否有一些内置函数可以解决这个问题，或者我可以手动添加哪个 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>

Answer 1

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

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 class 中所做的）

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

Bootstrap 字形垂直对齐

Bootstrap Glyphicon Vertical Align

css

jquery

twitter-bootstrap

glyphicons