Zentrieren Bild

Question

Hallo der folgende Code appneded dreimal haben:

<div class="bio"> 
    <div class="bio-icon"><img src="/images/icon_location.png" alt="Location" /></div> 
    <div class="bio-content"> 
     <div class="bio-title">location:</div> 
     <div class="bio-text">' . $obj[0] . '</div> 
    </div> 
</div> 

In jedem Fall (es unterschiedliche Breite und Höhe) das Bild in Bio-Symbol div unterschiedlich ist. Im Grunde würde es ein Symbol mit einem Text daneben geben. Ich möchte, dass der Text zentriert ist (vertikal), aber ich weiß nicht, was ich tun soll, da die Icons jeweils unterschiedliche Höhen haben! Was soll ich machen?

Dank

Answer 1

Sie vertical-align Eigenschaft verwenden, können den Text vertikal Ausgabe w3 link here

Für unterschiedliche Größe Symbol zu zentrieren, verwenden Sie Breite und Höhe

in css fixiert

.bio-icon 
{ 
    height:50px; 
} 

Diese automatisch die Größe wird Ihr Symbol/Bild.

Answer 2

können Sie versuchen, diese

.bio { 
    display:table; 
} 

.bio-icon, bio-content { 
    display:table-cell; 
    vertical-align:middle; 
} 

Das einzige Problem dabei ist IE7 nicht css Tabelleneigenschaften erkennen, so dass Sie jQuery verwenden könnte haben in IE7 zu beheben