Spesso durante la composizione è necessario l'allineamento verticale del testo in un blocco. Se è necessario eseguire questa operazione in una cella di tabella, viene impostato il valore della proprietà CSS di allineamento verticale.
Ma sorge una domanda ragionevole, è possibile fare a meno di una tabella, senza sovraccaricare il markup della pagina con tag non necessari? La risposta è "puoi", ma a causa dello scarso supporto di CSS da parte del browser MSIE, la soluzione al problema sarà diversa dalla soluzione per altri browser comuni.
Considera il seguente frammento come esempio:
un po' di testo
e prova ad allineare verticalmente il testo al centro del blocco e al bordo inferiore del blocco.
La soluzione del problema
Browser "corretti" (incluso MSIE
La maggior parte dei browser moderni supporta CSS2.1, ovvero il valore della cella di tabella per la proprietà display. Questo ci dà la possibilità di far apparire il blocco con il testo come una cella di tabella e, approfittando di ciò, allineare il testo verticalmente:
div (
display: cella-tabella;
allineamento verticale: medio;
}
div (
display: cella-tabella;
allineamento verticale: in basso;
}
Internet Explorer (fino alla 7a versione inclusa)
Per risolvere il problema dell'allineamento del testo al bordo inferiore di un blocco in MSIE, puoi utilizzare il posizionamento assoluto (qui abbiamo bisogno di un elemento in linea annidato in un blocco):
div (
posizione: relativa;
}
div intervallo (
blocco di visualizzazione;
posizione: assoluta;
fondo: 0%;
sinistra: 0%;
larghezza: 100%;
}
Questo insieme di regole funziona anche nei browser "giusti".
Specifica proprietà
Intervallo div (
blocco di visualizzazione;
larghezza: 100%;
}
non necessari, ma potrebbero essere necessari se, oltre all'allineamento verticale del testo, si prevede di utilizzare l'allineamento orizzontale, ad esempio text-align: center;.
Per l'allineamento verticale del testo al centro del blocco, il frammento originale dovrà ancora essere complicato: introdurremo un altro elemento in linea:
Materiale di studio:
- Centratura verticale in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Centratura verticale tramite CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Allineamento verticale (www.cssplay.co.uk/ie/valign.html)
- vertical-align: middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Un altro modo per allineare verticalmente in CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
Molto spesso in layout è richiesto di centrare qualche elemento orizzontalmente e/o verticalmente. Pertanto, ho deciso di creare un articolo con vari metodi di centratura, in modo che tutto sia a portata di mano in un unico posto.
Allineamento orizzontale
margine: auto
L'allineamento orizzontale con margine viene utilizzato quando è nota la larghezza dell'elemento centrato. Funziona per elementi di blocco:
Elem (margine sinistro: auto; margine destro: auto; larghezza: 50%;)
Specificare il valore automatico per il padding destro e sinistro li rende uguali, centrando l'elemento orizzontalmente all'interno del blocco padre.
allineamento del testo: centro
Questo metodo è adatto per allineare al centro il testo all'interno di un blocco. allineamento del testo: centro:
Sono allineato al centro
posizione e margine negativo a sinistra
Adatto per blocchi centrati di larghezza nota. Diamo al blocco genitore la posizione: relativa alla posizione relativa ad esso, l'elemento centrato è posizione: assoluta, sinistra: 50% e un margine sinistro negativo, che è uguale alla metà della larghezza dell'elemento:
Sono allineato al centro
display: blocco in linea + allineamento testo: centro
Questo metodo è adatto per allineare blocchi di larghezza sconosciuta, ma richiede un wrapper genitore. Ad esempio, in questo modo puoi centrare un menu orizzontale:
Allineamento verticale
altezza della linea
Per allineare una riga di testo, puoi utilizzare la stessa altezza e interlinea per il blocco padre. Adatto per pulsanti, voci di menu e altro.
Sono allineato verticalmente
posizione e margine negativo in su
Un elemento può essere allineato verticalmente assegnandogli un'altezza fissa e applicando la posizione: assoluta e un margine negativo verso l'alto pari alla metà dell'altezza dell'elemento da allineare. Al blocco genitore deve essere assegnata la posizione: relativa:
Wrapper (posizione: relativa;) elem (altezza: 200 px; margine: -100 px 0 0; posizione: assoluta; superiore: 50%;)
Pertanto, utilizzando il posizionamento e i margini negativi, puoi centrare l'elemento sulla pagina.
display: cella-tabella
Per l'allineamento verticale, la proprietà display: table-cell viene applicata all'elemento, il che lo fa emulare una cella di tabella. Impostiamo anche l'altezza e l'allineamento verticale: al centro. Avvolgeremo tutto questo in un contenitore con la proprietà dislpay: table; :
Sono allineato verticalmente
Allineare dinamicamente un elemento sulla pagina
Abbiamo coperto i modi per allineare gli elementi su una pagina usando i CSS. Ora diamo un'occhiata all'implementazione della variante jQuery.
Includiamo jQuery nella pagina:
Suggerisco di scrivere una semplice funzione per centrare un elemento sulla pagina, chiamiamola alignCenter(). L'elemento stesso funge da argomento per la funzione:
Funzione alignCenter (elem) (// codice qui)
Nel corpo della funzione, calcoliamo dinamicamente e appendiamo le coordinate del centro della pagina alle proprietà CSS left e top:
Funzione alignCenter (elem) (elem.css ((left: ($ (window) .width () - elem.width ())) / 2 + "px", top: ($ (window) .height () - elem. altezza ()) / 2 + "px" // ricorda di aggiungere la posizione: assoluta all'elemento per attivare le coordinate)))
Nella prima riga della funzione, otteniamo la larghezza del documento e sottraiamo da essa la larghezza dell'elemento, divisa a metà: questo sarà il centro della pagina in orizzontale. La seconda riga fa la stessa cosa, solo con l'altezza, per l'allineamento verticale.
La funzione è pronta, resta da appenderla al DOM ready e gli eventi di ridimensionamento della finestra:
$ (function () (// chiama la funzione di centratura quando il DOM è pronto alignCenter ($ (elem)); // chiama la funzione quando la finestra viene ridimensionata $ (window) .resize (function () (alignCenter ($ ( elem));)) // funzione per centrare l'elemento function alignCenter (elem) (elem.css ((// calcola le coordinate sinistra e superiore sinistra: ($ (window) .width () - elem.width ())) / 2 + "px", in alto: ($ (finestra) .height () - elem.height ()) / 2 + "px")))))
Utilizzo di Flexbox
Nuove funzionalità di CSS3, come Flexbox, stanno lentamente diventando comuni. La tecnologia aiuta a creare layout senza utilizzare float, posizionamento, ecc. Può essere utilizzato anche per centrare elementi. Ad esempio, usiamo flexbox sul genitore .wrapper e centriamo il contenuto all'interno:
Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; altezza: 500 px; larghezza: 500 px;) .wrapper .content (margine: auto; / * margin: 0 auto; solo orizzontalmente * / / * margin: auto 0; solo verticalmente * /)
Questa regola centra l'elemento orizzontalmente e verticalmente allo stesso tempo: il margine ora funziona non solo per l'allineamento orizzontale, ma anche per l'allineamento verticale. E senza una larghezza/altezza nota.
Risorse correlate
Aiuta il progetto
Centrare gli elementi verticalmente con i CSS è una sfida per gli sviluppatori. Tuttavia, ci sono diversi metodi per risolverlo, che sono abbastanza semplici. Questa lezione presenta 6 opzioni per centrare verticalmente il contenuto.
Iniziamo con una descrizione generale del problema.
Problema di centraggio verticale
Centrare orizzontalmente è molto semplice e facile. Quando l'elemento centrato è in linea, usa la proprietà parent-align. Quando l'elemento è basato su blocchi, ne impostiamo la larghezza e impostiamo automaticamente i margini sinistro e destro.
La maggior parte delle persone, quando usa la proprietà text-align:, fa riferimento alla proprietà vertical-align per centrare verticalmente. Tutto sembra abbastanza logico. Se hai utilizzato modelli tabulari, probabilmente hai utilizzato pesantemente l'attributo valign, il che rafforza la convinzione che l'allineamento verticale sia la strada giusta da percorrere.
Ma l'attributo valign funziona solo sulle celle della tabella. E la proprietà di allineamento verticale è molto simile ad essa. Influisce anche sulle celle della tabella e su alcuni elementi in linea.
Il valore della proprietà vertical-align agisce rispetto all'elemento inline genitore.
- In una riga di testo, l'allineamento viene eseguito in relazione all'altezza della riga.
- L'allineamento viene utilizzato nella cella della tabella in relazione al valore calcolato da un apposito algoritmo (di solito si ottiene l'altezza della riga).
Sfortunatamente, la proprietà vertical-align non ha effetto sugli elementi a livello di blocco (ad esempio, i paragrafi all'interno di un elemento div). Questa situazione può far pensare che non ci sia soluzione al problema dell'allineamento verticale.
Ma esistono altri metodi per centrare gli elementi del blocco, la cui scelta dipende da ciò che è centrato rispetto al contenitore esterno.
Metodo dell'altezza della linea
Questo metodo funziona quando vuoi centrare verticalmente una riga di testo. Tutto quello che devi fare è impostare l'altezza della linea in modo che sia maggiore della dimensione del carattere.
Per impostazione predefinita, lo spazio libero verrà distribuito uniformemente nella parte superiore e inferiore del testo. E la linea sarà centrata verticalmente. Spesso l'altezza della linea è resa uguale all'altezza dell'elemento.
HTML:
CSS:
#child (altezza della linea: 200 px;)
Questo metodo funziona in tutti i browser, sebbene possa essere utilizzato solo per una riga. Il valore di 200 px nell'esempio è scelto arbitrariamente. È possibile utilizzare qualsiasi valore maggiore della dimensione del carattere del testo.
Centrare un'immagine usando l'altezza della linea
E se il contenuto fosse un'immagine? Il metodo di cui sopra funzionerà? La risposta sta in un'altra riga di CSS.
HTML:
CSS:
#parent (line-height: 200px;) #parent img (vertical-align: middle;)
Il valore della proprietà line-height deve essere maggiore dell'altezza dell'immagine.
Metodo delle tabelle CSS
È stato menzionato sopra che la proprietà di allineamento verticale si applica alle celle della tabella, dove funziona alla grande. Possiamo rendere il nostro elemento come una cella di tabella e utilizzare la proprietà vertical-align per centrare verticalmente il contenuto.
Nota: Una tabella CSS non è la stessa di una tabella HTML.
HTML:
CSS:
#parent (display: table;) #child (display: table-cell; vertical-align: middle;)
Impostiamo l'output tabulare per il div padre e il div nidificato viene emesso come cella di tabella. Ora puoi usare la proprietà di allineamento verticale sul contenitore interno. Tutto in esso sarà centrato verticalmente.
A differenza del metodo precedente, in questo caso il contenuto può essere dinamico, poiché l'elemento div verrà ridimensionato per adattarsi al suo contenuto.
Lo svantaggio di questo metodo è che non funziona nelle versioni precedenti di IE. Dobbiamo usare la proprietà display: inline-block per il contenitore annidato.
Posizionamento assoluto e margini negativi
Questo metodo funziona anche in tutti i browser. Ma richiede che all'elemento centrato sia data un'altezza.
Il codice di esempio esegue contemporaneamente il centraggio orizzontale e verticale:
HTML:
CSS:
#parent (posizione: relativa;) #child (posizione: assoluta; alto: 50%; sinistra: 50%; altezza: 30%; larghezza: 50%; margine: -15% 0 0 -25%;)
Per prima cosa, impostiamo il tipo di posizionamento degli elementi. Quindi, per il div nidificato, imposta le proprietà in alto e a sinistra su 50%, che è il centro del genitore. Ma l'angolo in alto a sinistra dell'elemento nidificato è centrato. Pertanto, è necessario sollevarlo (metà dell'altezza) e spostarlo a sinistra (metà della larghezza), quindi il centro coinciderà con il centro dell'elemento genitore. Quindi in questo caso è necessaria la conoscenza dell'altezza dell'elemento. Quindi imposta l'elemento su margini negativi superiore e sinistro uguali rispettivamente alla metà dell'altezza e della larghezza.
Questo metodo non funziona in tutti i browser.
Posizionamento assoluto e stretching
Il codice di esempio esegue il centraggio verticale e orizzontale.
HTML:
CSS:
#parent (posizione: relativa;) #child (posizione: assoluta; superiore: 0; inferiore: 0; sinistra: 0; destra: 0; larghezza: 50%; altezza: 30%; margine: auto;)
L'idea alla base di questo metodo è allungare l'elemento nidificato su tutti e 4 i bordi dell'elemento padre impostando le proprietà superiore, inferiore, destra e sinistra su 0.
L'impostazione di margini di autoformazione su tutti i lati imposterà valori uguali su tutti e 4 i lati e renderà il nostro elemento div nidificato centrato sull'elemento genitore.
Sfortunatamente, questo metodo non funziona in IE7 e versioni precedenti.
Margini superiore e inferiore uguali
Questo metodo imposta esplicitamente margini uguali sopra e sotto l'elemento padre.
HTML:
CSS:
#genitore (imbottitura: 5% 0;) #figlio (imbottitura: 10% 0;)
Il codice CSS di esempio imposta i margini superiore e inferiore per entrambi gli elementi. Per un elemento nidificato, l'impostazione del padding servirà per il centraggio verticale. E il padding dell'elemento genitore centra l'elemento nidificato in esso.
Le unità relative vengono utilizzate per ridimensionare dinamicamente gli elementi. E per le unità assolute, dovranno essere eseguiti i calcoli.
Ad esempio, se l'elemento padre è alto 400 px e l'elemento nidificato è 100 px, sono necessari i margini superiore e inferiore di 150 px.
150 + 150 + 100 = 400
L'utilizzo di % consente di lasciare i calcoli al browser.
Questo metodo funziona ovunque. Il rovescio della medaglia è la necessità di calcoli.
Nota: Questo metodo funziona impostando il padding esterno di un elemento. Puoi anche usare i margini all'interno di un elemento. La decisione di utilizzare margini o padding dovrebbe essere presa in base alle specifiche del progetto.
Diviso galleggiante
Questo metodo utilizza un elemento div vuoto che fluttua e aiuta a controllare la posizione del nostro elemento annidato nel documento. Nota che il div mobile è posizionato prima del nostro elemento annidato nel codice HTML.
HTML:
CSS:
#parent (altezza: 250px;) #floater (float: sinistra; altezza: 50%; larghezza: 100%; margin-bottom: -50px;) #child (clear: entrambi; altezza: 100px;)
Scostiamo il div vuoto a sinistra oa destra e impostiamo la sua altezza al 50% dell'elemento genitore. In questo modo riempirà la metà superiore del genitore.
Poiché questo div è mobile, viene rimosso dal normale flusso del documento e dobbiamo annullare il ritorno a capo del testo per l'elemento nidificato. L'esempio usa clear: entrambi, ma è sufficiente usare la stessa direzione dell'offset dell'elemento div vuoto mobile.
Il bordo superiore dell'elemento div nidificato è direttamente sotto il bordo inferiore dell'elemento div vuoto. Dobbiamo spostare l'elemento annidato verso l'alto della metà dell'altezza dell'elemento vuoto flottante. Per risolvere il problema, utilizzare un valore negativo per la proprietà margin-bottom per un elemento div vuoto mobile.
Questo metodo funziona anche in tutti i browser. Tuttavia, il suo utilizzo richiede un elemento div vuoto aggiuntivo e la conoscenza dell'altezza dell'elemento nidificato.
Conclusione
Tutti i metodi descritti sono facili da usare. La difficoltà è che nessuno di questi è adatto a tutti i casi. È necessario analizzare il progetto e scegliere quello più adatto alle esigenze.
Chi si occupa di impaginazione, prima o poi, si trova di fronte alla necessità di allineare gli elementi in verticale... e sa quali difficoltà possono sorgere quando si allinea un elemento al centro. CSS ha una proprietà `vertical-align` con più valori che, logicamente, dovrebbero eseguire l'allineamento verticale. In pratica, tuttavia, non funziona affatto come previsto.
Esistono diverse tecniche per risolvere questo problema. Di seguito daremo un'occhiata più da vicino a ciascuno di essi.
1. Allineamento utilizzando un tavolo
In questo caso, sostituiamo il blocco esterno con una tabella a cella singola. L'allineamento verrà applicato al contenuto della cella, ovvero al blocco interno.
HTML
CSS
Esterno (larghezza: 200 px; altezza: 200 px; allineamento testo: centro; allineamento verticale: centro; colore di sfondo: #ffc;)
Il principale svantaggio di questa soluzione, dal punto di vista semantico, è l'utilizzo della tabella non per lo scopo previsto. Il secondo inconveniente è che per creare la tabella è necessario aggiungere un altro elemento attorno al blocco esterno.
Il primo meno può essere parzialmente deselezionato sostituendo i tag della tabella con div e impostando la modalità di visualizzazione della tabella in CSS.
HTML
CSS
Outer-wrapper (display: table;) .outer (display: table-cell;)
2. Allineamento con rientri
Supponendo di conoscere le altezze delle scatole interne ed esterne, l'allineamento può essere impostato utilizzando il padding verticale della scatola interna utilizzando la formula: (H esterna - H interna) / 2.
CSS
Esterno (altezza: 200 px;) .interno (altezza: 100 px; margine: 50 px 0;)
Lo svantaggio della soluzione è la conoscenza obbligatoria dell'altezza di entrambi i blocchi.
3. Allineamento con l'altezza della linea
Se il blocco interno non occupa più di una riga di testo, puoi utilizzare la proprietà line-height e impostarla uguale all'altezza del blocco esterno. Poiché il contenuto del blocco interno non dovrebbe andare alla seconda riga, è consigliabile aggiungere anche lo spazio bianco: nowrap e overflow: hidden.
CSS
Esterno (altezza: 200 px; altezza linea: 200 px;) .inner (spazio bianco: nowrap; overflow: nascosto;)
Questo metodo può essere utilizzato anche per allineare il testo su più righe. Per fare ciò, il blocco interno deve sovrascrivere il valore dell'altezza della linea e aggiungere il display: inline-block e vertical-align: regole intermedie.
CSS
Esterno (altezza: 200 px; altezza linea: 200 px;) .interno (altezza linea: normale; display: blocco in linea; allineamento verticale: medio;)
Lo svantaggio di questo metodo è che l'altezza del blocco esterno deve essere nota.
4. Allineamento tramite "allungamento"
Questo metodo può essere utilizzato quando l'altezza dell'unità interna è nota a noi, ma quella esterna no.
Per applicare questo metodo, abbiamo bisogno di:
- Imposta il blocco esterno sulla posizione di posizionamento relativo: relativo e su quello interno - posizione assoluta: assoluta;
- Aggiungi diverse regole in alto: 0 e in basso: 0 al blocco interno, per cui si estenderà all'intera altezza del blocco esterno;
- Imposta l'imbottitura verticale del blocco interno su automatico.
CSS
Esterno (posizione: relativo;) .inner (altezza: 100 px; posizione: assoluta; alto: 0; basso: 0; margine: auto 0;)
5. Allineamento con margine negativo in alto
Analogamente al precedente, questo metodo si applica quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno.
È necessario impostare il posizionamento relativo del blocco esterno e quello interno - assoluto. Quindi sposta il blocco interno verso il basso di metà dell'altezza del blocco esterno in alto: 50% e sollevalo di metà della sua altezza margin-top: -H interno / 2 .
CSS
Esterno (posizione: relativo;) .inner (altezza: 100 px; posizione: assoluta; superiore: 50%; margine superiore: -50 px;)
Lo svantaggio di questo metodo è che l'altezza dell'unità interna deve essere nota.
6. Allineamento con trasformazione
Il metodo può essere applicato quando l'altezza dell'unità interna è sconosciuta. Devi spostare il blocco interno verso il basso di metà dell'altezza della parte superiore del blocco esterno: 50%, quindi utilizzare la proprietà di trasformazione e spostarlo di nuovo verso l'alto utilizzando la funzione translateY (-50%).
CSS
Outer (posizione: relativa;) .inner (posizione: assoluta; top: 50%; transform: translateY (-50%);)
7. Allineamento con pseudo-elemento
Questo è il metodo più versatile che può essere utilizzato quando le altezze di entrambi i blocchi sono sconosciute.
L'essenza del metodo è aggiungere un blocco in linea con un'altezza del 100% all'interno del blocco esterno e impostarlo sull'allineamento verticale. Pertanto, l'altezza del blocco aggiunto sarà uguale all'altezza del blocco esterno. L'unità interna sarà allineata verticalmente con l'aggiunta, e quindi con l'unità esterna.
Per non rompere la semantica, è consigliabile aggiungere il blocco in linea utilizzando gli pseudo-elementi prima o dopo.
CSS
Esterno: prima (display: blocco in linea; altezza: 100%; allineamento verticale: centro; contenuto: "";) .inner (display: blocco in linea; allineamento verticale: centro;)
Lo svantaggio di questo metodo è che è impossibile da accettare con il posizionamento assoluto dell'unità interna.
8. Allinea con Flexbox
Il modo più moderno di allineamento verticale consiste nell'utilizzare il layout della casella flessibile (o abbreviato Flexbox). Ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, posizionandoli quasi ovunque. L'allineamento centrale per Flexbox è un compito molto semplice.
