6 trucchi CSS per allineare il contenuto verticalmente

, uno è il contenitore, l'altro, l'elemento figlio che contiene il contenuto.

Imposteremo prima la posizione dell'elemento contenitore in relativa, quindi imposteremo la posizione dell'elemento figlio su absolute . Questo ci permette di posizionarlo liberamente attraverso il contenitore.

Per allinearlo verticalmente, sposta la posizione dell'elemento figlio dall'alto, metà dell'altezza del contenitore e tiralo verso l'alto della metà della larghezza dell'elemento figlio. Ecco l'output:

Questo trucco è perfetto quando c'è un solo elemento figlio, altrimenti la posizione absolute influenzerà l'altro elemento all'interno dello stesso contenitore.

2. Usa Trasformazione CSS3

CSS3 Transform ha reso facile mettere il contenuto al centro. La trasformazione CSS3, a differenza della proprietà position, non influenzerà la posizione degli altri elementi all'interno dello stesso contenitore.

Supponendo che abbiamo la stessa struttura HTML del metodo precedente: un genitore, un elemento figlio - il 50% dall'alto e utilizzando la trasformazione CSS dà una traduzione di -50% . E il gioco è fatto.

Tieni presente però che le Trasformazioni CSS3 non funzioneranno in Internet Explorer 8 e versioni precedenti. Potresti voler usare uno qualsiasi degli altri metodi qui come riserva.

3. Usa il riempimento

Possiamo anche usare il padding per creare un'illusione di allineamento verticale. Per fare ciò, basta impostare il pad superiore e quello inferiore ugualmente, come segue:

Questo trucco è adatto per quando non si imposta il contenitore in una larghezza fissa, basta impostare la larghezza su auto .

4. Usa l'altezza della linea

Se si dispone di una sola riga di contenuto testuale all'interno di un contenitore, è possibile allineare il testo verticalmente utilizzando la proprietà line-height della line-height . Imposta il valore di line-height della line-height all'incirca uguale all'altezza del contenitore e vedrai il seguente output.

Ricorda che questo trucco funziona solo con una singola riga di testo. Se il contenuto si rompe in due o più righe, lo spazio tra ogni riga sarebbe come specificato line-height della line-height, dandoci troppo spazio bianco.

5. Usa la tabella CSS

Personalmente, l'uso di CSS Table è il mio trucco preferito per applicare l'allineamento verticale. Funziona con vecchi browser come Internet Explorer 8. Questo metodo viene eseguito impostando la visualizzazione degli elementi del contenitore sulla table, mentre l'elemento figlio deve essere visualizzato come table-cell quindi utilizzare la proprietà di vertical-align per centrare il testo verticalmente.

6. Usa Flexbox

L'ultimo metodo per centrare verticalmente è usando Flexbox. Flexbox è un nuovo modulo in CSS3. Offre un metodo più diretto per allineare il contenuto. Per centrare il contenuto verticalmente in una casella flessibile, è sufficiente aggiungere align-items: center; come segue, e questo è tutto.

Tieni presente che alcuni browser Flexbox supportano solo funzionalità parziali del modulo Flexbox come Internet Explorer 10, Safari, 6 e Chrome 27 e versioni successive. Quindi, simile al trucco con CSS3 Transform, assicurati che l'effetto cada bene in questi browser.