2012-05-16 16 views
6

ho ora alla ricerca di oreCome allineare verticalmente campate con testo e immagine

perche questo campione (ovviamente non nel posto giusto!): http://jsfiddle.net/DYLs4/9/

<div id="wrapper"> 
    <span id="text24">Text 24</span> 
    <span id="text12">Text 12</span> 
    <span id="icon"></span> 
</div> 

css:

#text24{ 
    font-size:24px; color:#999; 
} 
#text12{ 
    font-size:12px; color:#000; 
} 
#icon{ 
    height:36px; width:36px; 
    display:inline-block; 
    background:url(some-icon.png); 
}​ 

Result

Quello che sto cercando di realizzare è questo:

  • Centro verticalmente la text24 (rispetto all'immagine)
  • Allineare la parte inferiore del Text12 con fondo di text24
  • Assicurarsi che tutta l'opera cosa in IE6 -> cromo

Goal

Molte grazie per il vostro aiuto!

+0

hai provato e impostare vertical-align: middle; ? – ShibinRagh

risposta

18

Aggiungi vertical-align: middle all'immagine.

EDIT

Per commenti, questa soluzione richiede anche display: inline-block;.

+0

per immagine intendo '# icona' – slash197

+0

Quasi! Con allineamento verticale: medio, text24 è allineato con la parte superiore, non al centro dell'immagine – Johann

+0

sì, anche 'align =" middle "' nel tag funzionerebbe – gopi1410

0

So che la maggior parte dei progettisti odia utilizzare la tabella per il layout, ma lasciatemi provare comunque. È possibile utilizzare la tabella valign.

+0

Anche questo è stato in mente ma con un tavolo perderò la flessibilità in futuro per reskin la pagina e -say- inserire testo12 sotto text24 ... – Johann

0

Risultato finale

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper"> 
    <span id="text24">Text 24</span> 
    <span id="text12">Text 12</span> 
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/> 
</div> 

#wrapper{ 
    position:absolute; left:0; 
} 
#text24{ 
    font-size:24px; color:#999; font-weight:bold; 
} 
#text12{ 
    font-size:12px; color:#000; font-weight:bold; } 
#icon{ 
    height:36px; width:36px; 
    display:inline; 
    vertical-align:middle; 
    } 
+0

Grazie per il tuo aiuto ma text24 è allineato con la parte superiore, non il metà dell'immagine. Sembra che Slash197 abbia trovato una buona soluzione. Scusate! – Johann

Problemi correlati