Andrea Baccolini, web designer, siti internet

Traduzione dell’articolo “Vertical Align Middle” del blog “CSS STARS.“

 
IL VERTICAL ALIGN MIDDLE E’ DIFFICILE?

Quando sviluppiamo delle pagine web, dovremo allineare il testo a metà del div orizzontalmente o verticalmente.
La centratura orizzontale è facile, se usiamo il “text-align: center” per l’elemento principale.
Ma di solito centrare verticalmente il testo è un problema per gli sviluppatori.
Se il contenuto è solo una linea, allora possiamo usare proprietà “line-height” per impostare il contenuto allineato verticalmente al centro del contenitore. Basta impostare la “line-height” del testo uguale all’altezza del contenitore. Ma quando ci sono più righe di testo? Come lo allineiamo al centro del contenitore?
 

VERTICAL ALIGN MIDDLE

Vedremo diversi metodi per centrare o allineare verticalmente il testo nel mezzo di un contenitore.
 

 
VERTICAL ALIGN CON IL METODO LINE HEIGHT
 

 
Come primo passo, verrà aggiunto un contenitore e del testo per essere allineati nel mezzo del contenitore.
 
HTML PER IL VERTICAL ALIGN CON IL METODO LINE HEIGHT

This is sample text. This is sample text. This is sample text.

 
CSS PER IL VERTICAL ALIGN CON IL METODO LINE HEIGHT

.demo1 {
    line-height: 100px;
    height: 100px;
}

Qui daremo la line-height: 100px, come l’altezza del contenitore a 100px.
Ora il testo sarà allineato al centro del div. Ma se si aggiunge ancora una riga questo metodo non funziona.
La prima linea sarà in mezzo e il “line-height” tra le due linee sarà di 100px. Quindi dobbiamo usare un metodo diverso per allineare il testo al centro del div, quando ci sono più linee.
 
DEMO PER IL VERTICAL ALIGN XON IL METODO LINE HEIGHT

DEMO
 

VERTICAL ALIGN CON IL METODO TABLE
 

 
Il “vertical align” con il metodo “table” è molto utile quando il testo è su più di una riga. Vediamo come fare.

HTML PER IL VERTICAL ALIGN CON IL METODO TABLE

This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.

 
CSS PER IL VERTICAL ALIGN CON IL METODO TABLE

.demo2 {
	display: table-cell;
	vertical-align: middle;
	line-height: 20px;
	height: 150px;
	text-align: justify;
    }

DEMO PER IL VERTICAL ALIGN CON IL METODO TABLE

DEMO
 

Traduzione dell’articolo “Vertical Align Middle” del blog “CSS STARS.“