Centrare il testo all’interno di un box

28 settembre 2010

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 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 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:

.box {
    ...
    text-align: center; /* orizzontale */
    line-height: 150px; /* verticale */
}

Possiamo vedere in opera l’esempio su questa pagina.

Tutte le lezioni

1 ... 16 17 18 ... 49

Se vuoi aggiornamenti su Centrare il testo all'interno di un box inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Centrare il testo all'interno di un box

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy