ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

VERTICAL ALIGN MIDDLE

Argomenti: , ,

Autore: Andrea Baccolini

Le esclusioni css
Mar
30
2015

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

 
CSS PER IL VERTICAL ALIGN CON IL METODO LINE HEIGHT

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
 
Vertical-align on 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

 
CSS PER IL VERTICAL ALIGN CON IL METODO TABLE

DEMO PER IL VERTICAL ALIGN CON IL METODO TABLE

DEMO
 

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

 

 

VERTICAL ALIGN MIDDLE ultima modifica: 2015-03-30T12:45:33+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

2 commenti

  1. wido scrive:

    Ciao, non sono molto convinto dei due metodi elencati nell’articolo, considerando che il line-height crea problematiche se il testo del paragrafo si trova su più linee, considerando inoltre che il line-height non è stato definito per questa tipologia di utilizzo.

    Controllerei inoltre cosa avviene al box impostando quelle dimensioni di interlinea. Meglio utilizzare un padding se la necessità è quella di centrare verticalmente del testo all’interno di un box.

    Vi sono comunque altre tecnice per centrare verticalmente un contenuto dall’uso di flexbox o in alcuni casi della proprietà position in correlazione con la transform.

      Quote

    • Ciao Wido, ho tradotto questo articolo perche in un gruppo di Facebook si chiedeva come si usasse il vertical-align:middle.
      Il metodo line-height lo puoi usare per risolvere facilmente l’allineamento verticale su un paragrafo molto corto, in modo che il contenitore, anche se si restringe per le versioni mobili del sito, non divida in 2 righe la frase. Il secondo metodo invece è molto comodo perché centra verticalmente in automatico il testo anche stringendo il contenitore.

        Quote

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.