Uno dei problemi principali del CSS è lo scarso funzionamento della proprietà vertical-align. Il più delle volte, infatti, non è possibile centrare verticalmente un elemento e bisogna ricorrere a soluzioni un po’ più macchinose che, spesso, ci prendono molto tempo.
Vediamo in questa lezione CSS come centrare orizzontalmente e verticalmente del testo all’interno di un box con dimensioni fisse. Abbiamo spesso questa necessità, ad esempio per centrare del testo nei menù, nei banner, etc.
Per prima cosa definiamo il box che conterrà il testo:
<div class=”box”>Your advertise here</div>e alcune proprietà:
.box {
width: 250px;
height: 150px;
border: 1px solid;
color: #3D5F00;
background: #A3FF00;
}Abbiamo quindi un box di dimensione 250x150 pixel con uno sfondo verde chiaro e il testo di un verde più scuro. Ora dobbiamo centrare orizzontalmente e verticalmente il testo in esso contenuto.
Centrare orizzontalmente il testo è cosa immediata, abbiamo la proprietà text-align:center che funziona correttamente quindi possiamo affidarci ad essa.
Centrare il testo verticalmente in un box CSS
Per centrare verticalmente il testo non possiamo utilizzare la proprietà vertical-align ma possiamo sfruttare la proprietà line-height che specifica l'altezza di linea del testo, definendo così implicitamente la spaziatura tra due linee di testo successivo. Impostando il valore di tale proprietà della stessa dimensione dell’altezza definita per il box, il testo verrà automaticamente centrato verticalmente.
Aggiungiamo quindi le seguenti righe di codice alla proprietà precedente:
.box {
...
text-align: center; /* orizzontale */
line-height: 150px; /* verticale */
}Possiamo vedere in opera l’esempio su questa pagina.