jquery - Bootstrap Glyphicon Vertical Align -


is possible, re-positioning glyphicon it's displayed in "human-eye"-center of following text?

to explain, mean:

edited_screenshot

i tried "large-glyphicon", doesnt make difference. there built-in function solve this, or css add manually.

.

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

a quickest way set change titles 2 span tags , pass .tblcell class uses 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 suggest not using '& nbsp;' character using padding , use actual css padding (which did in glyphicon class)

here js.fiddle example. change has been applied first title. hope helps.


Comments

Popular posts from this blog

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -