Allineamento verticale in html

Capita spesso di dover centrare verticalmente un elemento nella pagina, in questi casi i css ci lasciano poche alternative per un posizionamento verticale degli elementi nella pagina. Con questo articolo intendo presentare alcune soluzioni possibili in una pagina html con css.

Centrare verticalmente un div in una pagina

Centrare un elemento di blocco nella pagina è realizzabile ma la soluzione implica alcune limitazioni, creaiamo un nuovo file html con un div al suo interno.

Nelle regole css impostiamo una formattazione standard nel body mentre per il nostro div definiamo altezza e larghezza e un posizionamento assoluto al 50% da sinistra e da sopra.

body{
margin:0px;
padding:0px;
background-color:#ffffff;
color:#000000;
text-align:center;
}
div{
margin:0px auto;
padding:0px;
width:300px;
height:200px;
background-color:#cccccc;
position:absolute;
top:50%;
left:50%;
margin:-100px 0px 0px -150px;
}

Come possiamo notare dal codice il posizionamento assoluto posiziona il primo pixel del div al centro della pagina, per far sì che l’intero div sia centrato aggiungiamo un margine superiore pari alla metà dell’altezza e un margine sinistro pari alla metà della larghezza entrambi negativi. Con questo stratagemma è possibile centrare verticalmente un div nella pagina ma è indispensabile conoscere l’altezza dell’elemento.

VEDI ESEMPIO

Un altro sistema per centrare verticalmente un elemento in una pagina è di definire un elemento contenitore con vertical-align:middle e display:table-cell; questo esempio funziona per tutti i browser principali tranne internet explorer 7 e superiori.

Centrare verticalmente il testo in un div

Questa soluzione è normalmente molto utilizzata per quelle parti con poco testo e molto spazio, ad esempio footer e header.

<div>
Questo è un testo fittizio
</div>

Le possibilità a nostra disposizione sono due, la prima consiste nel definire padding superiore e inferiore con uguali valori.

div{
width:600px;
padding:10px 0px;
margin:0px;
color:#000000;
background-color:#cccccc;
}

La seconda soluzione utilizza la proprietà line-height per gestire un’unica linea di testo nel div.

div{
width:600px;
height:30px;
padding:0px;
margin:0px;
color:#000000;
background-color:#cccccc;
line-height:30px;
}

Avendo il div uguale altezza ed interlinea per il testo, lo centrerà verticalmente.

Occorre ricordare che nel caso di liste o altri tag bisogna considerare elementi genitori e valori di default. Diventa così indispensabile formattare i valori di default degli elementi e gestire al meglio l’ereditarietà tra gli elementi (nel caso di una lista il tag <ul> dovrà avere padding uguale agli elementi figli <li> per esempio).

Gestire l’allineamento verticale di un testo in prossimità di un’immagine

Vediamo quindi l’unica proprietà css che ha come scopo l’allineamento verticale del testo, vertical-align. Questa proprietà è utilizzabile solo per le celle di una tabella e con elementi rimpiazzati (per lo più immagini) affinchè sia possibile definire un’allineamento del testo rispetto all’elemento genitore. Il funzionamento è semplice e oltre ai valori middle, top e bottom è possibile definire una percentuale per il posizionamento dell’interlinea o nel caso un posizionamento rispetto al testo genitore.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>