Bootstrap Glyphicon Vertical Align

Question

Is it possible, to re-positioning the glyphicon so that it's displayed in the "human-eye"-center of the following Text?

To explain, what i mean:

I tried "large-glyphicon", but it doesnt make a difference. Is there some built-in function to solve this, or which CSS could i add manually.

.

Code-Snippet for better viewing:

 <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

A quickest way to set this up would be to change your titles to 2 span tags and then pass a .tblcell class that uses the table-cell CSS property.

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

I also suggest not using the '& nbsp;' character you are using for padding and just use an actual CSS padding (which is what I did in your glyphicon class)

Here is a JS.Fiddle with your example . The change has only been applied to your first title. Hope that helps.