Bootstrap Glyphicon Vertical Align

Question

Возможно ли повторное позиционирование глификона так, чтобы оно отображалось в «человеческом глазу» -центре следующего текста?

Чтобы объяснить, что я имею в виду:

Я попытался "большой-glyphicon", но это не делает разницы. Есть ли встроенная функция для решения этой проблемы или какой CSS можно добавить вручную.

.

Code-сниппета для лучшего просмотра:

<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 теги, а затем передать .tblcell класс, который использует свойство 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; 
} 

Я также предлагаю не с помощью '& NBSP;' который вы используете для заполнения и просто используете фактическое заполнение CSS (это то, что я сделал в вашем классе глификона)

Вот JS.Fiddle with your example. Это изменение было применено только к вашему первому названию. Надеюсь, это поможет.