[CSS] vertical-align

[panta]

ciao ragazzi ho un problemino col vertical-align

mi spiego:

Sto realizzando un sito senza tabelle, col layout interamente css.
Ho delle specie di box nell'homepage del sito... sono due sulla prima riga e tre sulla seconda.
Questi box dovrebbero sembrare delle tabelle, nel senso che sono divisi in due righe (virtuali) nella prima abbiamo il titolo bianco su fascione grigio scuro, mentre nella riga sotto abbiamo il contenuto testuale del paragrafo

Ora, io ho realizzato questi box in questo modo:

<div id="box_welcome">
	<h1>:: MioSito, benvenuti</h1>				
	

Questo è solo un testo di prova bwsejgs jwa ekyae wkjyawg fawyeg awme ae wfawe 
	fawef aewrf awef awef awef aweesr gser gsreg serg serg s,jye ksey kseg fkuef kserf 
	yegr fresf greksyregmef</p>
</div>
<div id="box_news">
	<h1>:: News</h1>				
	

Questo è solo un testo di prova bwsejgs jwa ekyae wkjyawg fawyeg awme ae wfawe 
	fawef aewrf awef awef awef aweesr gser gsreg serg serg s,jye ksey kseg fkuef kserf 
	yegr fresf greksyregmef</p>
</div>

come vedete la prima riga (quella col titolo) non è una vera riga ma solo un <h1> a cui nel css ho dato:

h1 {
	color: #FFF;
	font-size: 100%;
	font-weight: bold;
	background-color: #3c3c3c;
	height: 27px;
	width: 100%;
	background-image: url(box_corner.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

come notate ho impostato l'altezza a 27px in modo da avere una sorta di fascione uguale per tutti i box

ora il mio problema è il seguente: io voglio centrare in altezza il titolo (il testo del h1) rispetto al suo fascione di 27 pixel, in quanto ora come ora sta in alto

a rigor di logica visto che non ci sono padding basterebbe aggiungere nell'h1 un bel vertical-align: middle, ma non ha mai funzionato... ho già fatto altri lavori come questo e ho risolto mettendo padding-top: 8px ... ma fa schifo, perchè se cambio l'altezza della fascia devo andare a cambiare il padding (ottenuto poi a naso)

qlcn mi sa dire come ci si comporta in questi casi per ottenere codice pulito e sensato?

grazie mille a tutti in anticipo

[Mutato]

Se ti serve un'altezza pixel perfect, allora questa soluzione non va bene. Se invece vuoi una altezza uguale per tutti i "fascioni" ti basta dare un padding-top e bottom uguali

Il css

h1 {
color: #FFF;
font-size: 100%;
font-weight: bold;
background-color: #3c3c3c;
width: 100%;
background-image: url(box_corner.gif);
background-repeat: no-repeat;
background-position: right top;
padding: 10px 0 10px 0;
}

Qui il risultato
http://www.frequenze.it/mutato/mutato.asp?id=8

[panta]

ho trovato una soluzione migliore (zeldman rullezza)... metto il line-height uguale all'altezza della fascia, e automaticamente mi centra il testo in verticale senza andare a settare il padding

ciao

[Mutato]

funziona finche' il testo sta su una riga sola.

[panta]

si, vero anche quello... lo davo per scontato perchè nel mio caso sarà così, cmq hai ragione

denghiù