Uno dei problemi a cui vanno incontri i neofiti che provano i css è l’allineamento verticale di un blocco, un’immagine, rispetto ad un blocco contenitore. Un qualcosa tipo valign="middle" delle tabelle.

Molti iniziano provando la proprietà vertical-align:middle.

Ovviamente non ottengono il risultato sperato. Perché? Poiché, come spiegato nel capitolo riguardante le proprietà dei testi, tale proprietà serve ad allineare più elementi inline successivi. Qui troverete degli esempi che valgono più di mille parole (o almeno spero… 🙂 ).

Come fare allora per poter centrare un blocco di testo, un’immagine dentro un blocco? Abbiamo in effetti varie possibilità.

Consideriamo il primo caso: un menu con un’immagine di sfondo ed il testo su un’unica riga.
Qui vedete l’esempio: noterete nell’ultimo caso l’inserimento della proprietà "line-height:30px;", cioè l’altezza dell’immagine di sfondo. In tal modo si forza l’interlinea alla grandezza dello sfondo, centrando automaticamente il testo all’etichetta.
Attenzione: tale tecnica ha una controindicazione. Se il testo occupa più linee, lo stesso scenderà in basso, con effetti assolutamente non voluti. Noterete tale problema ingrandendo il testo dell’esempio (con firefox » control [+] ).

Se volessimo invece centrare verticalmente un box dentro un altro box o alla pagina si può ricorrere al posizionamento assoluto degli stessi.
Un ottimo articolo per tale scopo è presente su constile.org.

Torna all'indice di: guida css

Pubblicato nella categoria Css. Feed Commenti RSS 2.0.