Question

是否有可能重新定位glyphicon以便它显示在以下文本的人眼＆＃34; - 中心？

解释一下，我的意思是：

edited_screenshot

我试过＆＃34;大型glyphicon＆＃34;，但它并没有什么区别。是否有一些内置函数来解决这个问题，或者我可以手动添加哪些CSS。

Code-Snippet可以更好地查看：

＆＃13;

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

＆＃13;

Answer 1

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

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

我还建议不要使用＆＃39;＆amp; NBSP;＆＃39;您用于填充的字符，只使用实际的CSS填充（这是我在您的glyphicon类中所做的）

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

Bootstrap Glyphicon垂直对齐

1 个答案: