Ufficio Scolastico Provinciale di Varese

Abbiamo quindi un box di dimensione 250×150 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.

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: