6 trucchi CSS per allineare il contenuto verticalmente
Parliamo dell'allineamento verticale nei CSS, o per essere più precisi su come non sia fattibile. Il CSS non ha ancora fornito un modo ufficiale per centrare il contenuto verticalmente all'interno del suo contenitore. È un problema che probabilmente ha frustrato gli sviluppatori web ovunque. Ma non temere, in questo post, correremo alcuni trucchi che possono aiutarti imitare l'effetto.
Questi trucchi possono tuttavia avere limitazioni e potrebbe essere necessario usa più di un trucco per completare l'illusione. Se conosci qualche altro trucco, faccelo sapere nei commenti.
1. Usa il posizionamento assoluto
Il primo trucco che vedremo qui usa il Prima imposteremo la posizione dell'elemento contenitore in relativa, quindi imposteremo la posizione dell'elemento figlio su 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 il Trasformazione CSS3 ha reso facile mettere il contenuto al centro. Trasformazione CSS3, a differenza del Supponendo che abbiamo la stessa struttura HTML del metodo precedente: un genitore, un elemento figlio - Tieni presente però che le Trasformazioni CSS3 non funzioneranno in Internet Explorer 8 e versioni precedenti. Potresti voler utilizzare uno qualsiasi degli altri metodi qui come riserva. Possiamo anche usare Questo trucco è adatto per quando non si imposta il contenitore in una larghezza fissa, basta impostare la larghezza su Se si dispone di una sola riga di contenuto testuale all'interno di un contenitore, è possibile allineare il testo verticalmente utilizzando il 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 in Personalmente, l'uso di CSS Table è il mio trucco preferito per applicare l'allineamento verticale. Funziona con i vecchi browser come Internet Explorer 8. Questo metodo si esegue impostando la visualizzazione dell'elemento contenitore L'ultimo metodo per centrare verticalmente è usando Flexbox. Flexbox è un nuovo modulo in CSS3. Offre un metodo più semplice per allineare il contenuto. Per centrare il contenuto verticalmente in una casella flessibile, è sufficiente aggiungere 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.posizione proprietà. Ne hai due assoluto. Questo ci permette di posizionarlo liberamente attraverso il contenitore. assoluto la posizione influenzerà l'altro elemento all'interno dello stesso contenitore.2. Usa Trasformazione CSS3
posizione proprietà, non influenzerà la posizione di altri elementi all'interno dello stesso contenitore.50% dall'alto e usando la trasformazione CSS si ottiene una traduzione di -50%. E il gioco è fatto.3. Usa il riempimento
imbottitura per creare un'illusione di allineamento verticale. Per fare ciò, è sufficiente impostare il pad superiore e quello inferiore ugualmente, come segue:auto.4. Usa l'altezza della linea
altezza della linea proprietà. Impostare il altezza della linea valore per circa lo stesso dell'altezza del contenitore, e vedrete il seguente output.altezza della linea, dandoci troppo spazio bianco.5. Usa la tabella CSS
tavolo, mentre l'elemento figlio deve essere visualizzato come table-cell quindi utilizzare il vertical-align proprietà per centrare il testo verticalmente.6. Usa Flexbox
align-items: center; come segue, e questo è tutto.
