Allineare testo verticalmente

[damy11]

<div id="barra_stat"><div>Salute [img]immagini/icone/health.png[/img] Vita [img]immagini/icone/energy.png[/img] Ciao [img]immagini/icone/coin.png[/img]</div></div>

#barra_stat{
background: #999 url('../immagini/bgbarra.jpg');
font-size: 13px;
height: 35px;
padding: 2px 0 0 0;
width:90%;
margin: 0 auto;
text-align: center}

Vorrei allineare il testo verticalmente per vedere sia il testo che le immagini centrati verticalmente...come fare?

[magunet]

Ciao,

Per raggiungere il tuo scopo hai diverse strade.

Prima strada, puoi usare le tabelle.

Seconda strada, puoi inserire immagine e testi e immagini in div differenti, e trasformare qui div in tabelle, utilizzando la proprietà display: table

terza strada: Utilizzare il line-height

Nel tuo caso forse sarebbe più utile le seconda soluzione.

Su questo link vengono spiegati bene tutti e tre i casi.

http://www.mediacreation.it/css-graf...mente-181.html

Prova a vedere quale ti conviene di più.

[Prill]

Se, come sembra dal tuo codice, il tutto va su una sola riga (essendo il tuo div alto 35 pixel), puoi semplicemente usare il line-height pari all'altezza del div:

#barra_stat{
width:90%;
height: 35px;
line-height: 35px;
background: #999 url('../immagini/bgbarra.jpg');
font-size: 13px;
padding: 2px 0 0 0;
margin: 0 auto;
text-align: center}

aggiungendo per le immagini

#barra_stat img{
vertical-align:middle;

[magunet]

Non può funzionare il vertical-align, se #barra_stat non è una tabella e l'immagine non si trova in una cella.

Dovrebbe aggiungere l'attributo display: table a #barra_stat.

Poi inserire display: table-cell al div sottostante, con vertical-align: middle.

[Prill]

se imposto un allineamento verticale su una immagine, questo riguarda la sua posizione rispetto al testo che lo segue o lo precede sulla stessa riga, non ha a che vedere col contenitore.
Già in

[img]miaImmagine[/img] qwerty [img]alraImmagine[/img] qwerty </div>

ho il testo centrato rispetto all'immagine (anche se non al centro assoluto, ma giocando col padding si può avviare a quello scarto)

Il display:table in questo caso è da evitare (ie nelle sue versioni meno recenti non lo supporta)