Allineamento verticale con i CSS
Venerdì 27 Gennaio 2006 - 14:25
di Alessandro Fulciniti
Gli articoli teorici sui CSS sono molto utili a chi vi si è avvicinato da poco, soprattutto se approfonditi, accompagnati da screenshot ed esempi, perchè sono spesso più assimilabili delle specifiche W3C. È il caso di Vertical-Align Misuse, un articolo decisamente sfizioso su una proprietà poco conosciuta e usata spesso in maniera inadeguata: il vertical-align. Per chi ha difficoltà con l’inglese, ho ripescato un piccolo estratto sul tema da questo articolo di PRO che contiene le due informazioni indispensabili su questa proprietà.
Se siete abituati alle tabelle e all’uso dell’attributo
valign, troverete che i CSS nel centrare verticalmente elementi generici sono un po’ carenti. A questo proposito, ricordo che la proprietà CSSvertical-alignassume un duplice ruolo:
- Centrare verticalmente il contenuto di una cella di tabella, proprio come valign
- Allineare immagini ed elementi inline rispetto alla riga di testo che occupano
Se applicata in altri casi, non ha effetto.
Pensavo che in realtà una piccola eccezione c’è, peccato che non sia cross-browser.
Se dichiariamo un elemento con display:table-cell possiamo applicare la proprietà
vertical-align come se fosse la cella di una tabella. Ho preparato un piccolo
esempio, composto da un’unica regola CSS:
div#box{display: table-cell;width: 200px;height: 300px;
vertical-align: middle;text-align: center;
background: #D9FFCB;border: 1px solid #88D86B}
Il risultato sperato si ottiene su Opera, Firefox e credo anche su Safari, niente da fare invece per Internet Explorer fino alla versione 6. Per concludere una piccola nota: la tecnica dell’esempio appena visto non è applicabile direttamente ad elementi float o posizionabili assolutamente. Il motivo? Elementi float o posizionati vengono resi di default block-level, quindi la dichiarazione display:table-cell verrebbe ignorata.
Commenti
1
vertical-align lo conoscevo, ma non l’ho mai usato. Soprattutto non ho mai capito se funziona con le immagini. Cioè se metto un div con height 120 e line-height 120, all’interno inserisco un’immagine alta 90, non me la centra. E’ normale?
# - postato da miki - 27 Gennaio 2006 - 18:02
2
Miki, è proprio questo il caso in cui si può usare vertical-align. Se per esempio il tuo div alto 120px e con line-height pari a120px ha id=”header” dovrebbe bastare:
div#header{height: 120px;line-height: 120px}
div#header img{vertical-align: middle}# - postato da Alessandro Fulciniti - 27 Gennaio 2006 - 21:45
3
Approfitto dell’argomento per porre un quesito, già inserito in un newsgroup, al quale non è stato risposto…
Sto cercando di realizzare un layout come questo:
-----------------------------------------------
| ----- ------------------------- ----- |
|| 1 | | | | 3 ||
|| | | 2 | | ||
| ----- | | ----- |
| ------------------------- |
| 5 |
| --------------------------------- |
| | 4 | |
| --------------------------------- |
-----------------------------------------------
5 è il DIV esterno
2 è un DIV che contiene una immagine
4 è un DIV che contiene testo
2 e 4 devono essere centrati orizzontalmente rispetto a 5Ho fatto i DIV 1 e 3 (che contengono un’immagine ciascuno) con i float, uno left e uno right, per farli andare ai lati del DIV 2.
La cosa che non riesco a fare è centrare verticalmente i DIV 1 e 3 rispetto al DIV esterno 5…Come si fa?
La struttura è questa:
#5 {
border: 1px solid #000000;
margin: 0.1em auto;
padding: 0;
text-align: center;
width: 98%;
}#1{
float: left;
margin: 0.2em;
}#3{
float: right;
margin: 0.2em;
}#2{
float: none;
}#4{
color: #FFFFFF;
font-size: 0.9em;
padding: 0 1em 0.4em 1em;
}# - postato da RimSA - 27 Gennaio 2006 - 23:37
4
Ma sono solo io che con firefox lo vedo in alto a destra il box dell’esempio?
5
Pugia, il box è in alto a destra, ma il suo testo dovrebbe essere centrato verticalmente.
Rimsa, non ho capito cosa vuoi ottenere: il meccanismo di commenti non ha mantenuto gli spazi. Il mio consiglio: su PRO dovresti trovare quello che fa al caso tuo. In caso contrario, potresti provare sul forum.
# - postato da Alessandro Fulciniti - 29 Gennaio 2006 - 10:10
6
Ops, che scemo…
7
in riferimento al commento n. 2 di Alessandro Fulciniti a me quel metodo non funziona proprio per nulla.
Ho il mio div 148 x 148 ed una immagine alta 110, ebbene non me la centra mica in verticale sai???
C’è forse qalche altro settaggio da fare o altro metodo??questo è quello che ho usato io…
div.PhotoCard {margin:2px; padding:0px;
border:1px solid #95B094;
width:148px!important;width:150px;
height:148px!important;height:150px;
line-height: 150px;
text-align:center;
}div.PhotoCard img{vertical-align: middle;}
grazie mille in anticipo e ciao.
8
Se mi è permesso sollecito un problema simile a quello trattato sinora :
il mio Sogno è quello di riuscire a centrere verticalmente in bottom del testo inserito in una gabbia di altezza fissa.
Vi invito ad inserire attributi al mio css di esempio:
#gabbia {
width: 400px;
height: 200pxfont-family: Verdana;
font-size: 10px;
color: #000000;
}Spero voi abbiate la soluzione al mio caso, e lo sperano anche i miei capelli che stressati si dipingono di bianco :)
# - postato da Marco - 28 Febbraio 2006 - 10:15
9
..mmm… mi sa che bisogna iniziare a smettere di pensare di allineare verticalmente un elemento, ad esempio, nel body. Quel giochetto lo ottieni solo se hai tutto ingabbiato in una tabella. E infatti per ottenere questo effetto su altri elementi, devi applicarci la regola “display: table-cell;”, cosa che secondo me ha pochissimo senso. Care vecchie tabelle… La cosa che non capisco è perchè di default questa proprietà, il vertical-align, tanto bella non sia presente come proprietà per i vari elementi block. Care vecchie tabelle… comunque sia, W i CSS!
# - postato da cemsal - 06 Novembre 2006 - 12:10
10
Purtroppo il metodo vertical-align non funziona con l’xhtml: esistono alternative (per le immagini)?
Se non esistono si dovrà prima o poi abbandonare l’allineamento verticale
# - postato da Marco - 13 Novembre 2006 - 13:01
11
ho sempre utilizzato l’attributo display:table, per quelle lacune o pregi a seconda del punto di vista che presenta firefox se non si utilizza l’height…
12
non funziona.. cosa sbaglio?
img contenuta in un div:nel css:
#opere {
float: left;
border: 1px solid white;
margin-right: 30px;
margin-bottom: 20px;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
cursor: hand;
background-color: green;
display: table-cell;
}
#opere img{
vertical-align: middle;
}# - postato da Steel - 05 Novembre 2007 - 12:39
13
scusate c’era un errore, riposto:
div con id= opere che contiene una img#opere {
float: left;
display: table-cell;
border: 1px solid white;
margin-right: 30px;
margin-bottom: 20px;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
cursor: hand;
background-color: green;
vertical-align: middle;
}
#opere img{
vertical-align: middle;
display: table-cell;
}# - postato da Steel - 05 Novembre 2007 - 12:47
14
risposta al commento n. 2 e 7
non funziona proprio perchè ragionate come erroneamente si faceva con le tabelle, invece come spiega l’articolo l’istruzione server per “Allineare immagini ed elementi inline rispetto alla riga di testo che occupano”, quindi voi avete semplicemente detto all’immagine di essere centrata rispetto alla linea di testo
# - postato da Jarno Rossi - 18 Marzo 2008 - 16:34
15
bisogna rinunciare a Valig… ma è un processo sopratutto MENTALE!!!!! basta ragionare “con le tabelle”!!!
# - postato da laura - web designer - 09 Aprile 2008 - 18:00
16
Facile dire “bisogna rinunciare all’allineamento verticale”, peccato che bisogna fare i conti con chi ti chiede esplicitamente di allineare verticalmente un oggetto :/
# - postato da Silver - 04 Giugno 2009 - 16:09
17
insomma i css tanto belli e tanto cari poi non c’è modo di allineare verticalmente la roba?!? ma com’è possibile? che devo fare, continuo a usare le tabelle e tanti saluti agli standard ecc ecc?
# - postato da Fabio Mosti - 10 Novembre 2009 - 12:21
18
Ciao, ho provato il tuo esempio e funziona bene, con firefox… con explorer avevo capito che non funzionava sino alla versione sei ma dalla mia prova sembra non funzionare nemmeno nel 7 e nell’8. Ok invece con Crome…
Peccato sarebbe stata una gran cosa# - postato da Simona - 16 Dicembre 2009 - 16:19