Allineamento div orizzontale al centro CSS. Centratura del div e altre sottigliezze di posizionamento

CSS

HTML

Penso che molti di voi che hanno avuto a che fare con il layout abbiano riscontrato la necessità di allineare gli elementi verticalmente e conoscano le difficoltà che sorgono quando si allinea un elemento al centro.

Sì, esiste una speciale proprietà di allineamento verticale multivalore nei CSS per l'allineamento verticale. Tuttavia, in pratica non funziona affatto come previsto. Proviamo a capirlo.

Confrontiamo i seguenti approcci. Allinea utilizzando:

• tavoli,
• rientranza,
• altezza della linea
• allungamento,
• margine negativo,
• trasformare
• pseudoelemento
• flexbox.

Per illustrare, considerare il seguente esempio.

Sono presenti due elementi div, uno dei quali annidato nell'altro. Diamo loro le classi corrispondenti: esterna e interna.

La sfida è allineare l'elemento interno con il centro dell'elemento esterno.

Innanzitutto, consideriamo il caso in cui le dimensioni dei blocchi esterni ed interni conosciuto. Aggiungiamo la regola display: inline-block all'elemento interno e text-align: center e vertical-align: middle all'elemento esterno.

Ricorda che l'allineamento si applica solo agli elementi che hanno una modalità di visualizzazione in linea o blocco in linea.

Impostiamo le dimensioni dei blocchi e i colori dello sfondo in modo da poterne vedere i bordi.

Esterno ( larghezza: 200px; altezza: 200px; allineamento testo: centro; allineamento verticale: centro; colore sfondo: #ffc; ) .interno ( display: blocco in linea; larghezza: 100px; altezza: 100px; colore sfondo : #fcc; )
Dopo aver applicato gli stili, vedremo che il blocco interno è allineato orizzontalmente, ma non verticalmente:
http://jsfiddle.net/c1bgfffq/

Perchè è successo? Il fatto è che la proprietà di allineamento verticale influisce sull'allineamento l'elemento stesso, non il suo contenuto(tranne quando viene applicato alle celle della tabella). Pertanto, l'applicazione di questa proprietà all'elemento esterno non ha prodotto nulla. Inoltre, anche applicare questa proprietà a un elemento interno non avrà alcun effetto, poiché i blocchi inline sono allineati verticalmente rispetto ai blocchi adiacenti e nel nostro caso abbiamo un blocco inline.

Esistono diverse tecniche per risolvere questo problema. Di seguito daremo uno sguardo più da vicino a ciascuno di essi.

Allineamento tramite tabella

La prima soluzione che mi viene in mente è sostituire il blocco esterno con una tabella di una cella. In questo caso l'allineamento verrà applicato al contenuto della cella, cioè al blocco interno.

http://jsfiddle.net/c1bgfffq/1/

L'ovvio svantaggio di questa soluzione è che, da un punto di vista semantico, non è corretto utilizzare le tabelle per l'allineamento. Il secondo svantaggio è che per creare una tabella è necessario aggiungere un altro elemento attorno al blocco esterno.

Il primo meno può essere parzialmente rimosso sostituendo i tag table e td con div e impostando la modalità di visualizzazione della tabella nei CSS.

.outer-wrapper ( display: tabella; ) .outer ( display: tabella-cella; )
Tuttavia, il blocco esterno rimarrà comunque un tavolo con tutte le conseguenze che ne conseguiranno.

Allineamento tramite rientri

Se si conoscono le altezze dei blocchi interno ed esterno, è possibile impostare l'allineamento utilizzando i rientri verticali del blocco interno utilizzando la formula: (H esterno – H interno) / 2.

Esterno (altezza: 200px; ) .interno (altezza: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Lo svantaggio della soluzione è che è applicabile solo in un numero limitato di casi quando si conoscono le altezze di entrambi i blocchi.

Allineamento utilizzando l'altezza della linea

Se sai che il blocco interno non deve occupare 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 deve estendersi alla seconda riga, si consiglia di aggiungere anche lo spazio bianco: nowrap e overflow: hidden rule.

Esterno (altezza: 200px; altezza linea: 200px;) .interno (spazio bianco: nowrap; overflow: nascosto;)
http://jsfiddle.net/c1bgfffq/12/

Questa tecnica può essere utilizzata anche per allineare il testo su più righe se si ridefinisce il valore dell'altezza della riga per il blocco interno e si aggiungono anche le regole display: inline-block e vertical-align: middle.

Esterno (altezza: 200px; altezza della linea: 200px;) .interno (altezza della linea: normale; display: blocco in linea; allineamento verticale: centrale;)
http://jsfiddle.net/c1bgfffq/15/

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza del blocco esterno.

Allineamento utilizzando "stretch"

Questo metodo può essere utilizzato quando l'altezza del blocco esterno non è nota, ma è nota l'altezza del blocco interno.

Per fare questo è necessario:

1. impostare il posizionamento relativo al blocco esterno e il posizionamento assoluto al blocco interno;
2. aggiungi le regole top: 0 e bottom: 0 al blocco interno, in conseguenza del quale si allungherà fino all'intera altezza del blocco esterno;
3. imposta il riempimento verticale del blocco interno su automatico.

.outer ( posizione: relativa; ) .inner ( altezza: 100px; posizione: assoluta; superiore: 0; inferiore: 0; margine: automatico 0; )
http://jsfiddle.net/c1bgfffq/4/

L'idea alla base di questa tecnica è che l'impostazione di un'altezza per un blocco allungato e posizionato in modo assoluto fa sì che il browser calcoli il riempimento verticale in un rapporto uguale se è impostato su auto .

Allineamento con margine negativo superiore

Questo metodo è diventato ampiamente conosciuto e viene utilizzato molto spesso. Come il precedente, si usa quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno.

È necessario impostare il blocco esterno sul posizionamento relativo e il blocco interno sul posizionamento assoluto. Quindi devi spostare il blocco interno verso il basso di metà dell'altezza del blocco esterno top: 50% e sollevarlo di metà della sua altezza margin-top: -H inner / 2.

Esterno (posizione: relativa;) .interno (altezza: 100px; posizione: assoluta; superiore: 50%; margine superiore: -50px;)
http://jsfiddle.net/c1bgfffq/13/

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza dell'unità interna.

Allineamento con trasformazione

Questo metodo è simile al precedente, ma può essere utilizzato quando non si conosce l'altezza dell'unità interna. In questo caso, invece di impostare un riempimento pixel negativo, puoi utilizzare la proprietà trasforma e spostare il blocco interno verso l'alto utilizzando la funzione TranslateY e un valore di -50% .

Esterno ( posizione: relativa; ) .interno ( posizione: assoluta; superiore: 50%; trasformazione: traduciY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Perché era impossibile impostare il valore come percentuale nel metodo precedente? Poiché i valori del margine percentuale sono calcolati rispetto all'elemento genitore, un valore del 50% sarebbe la metà dell'altezza del riquadro esterno e dovremmo alzare il riquadro interno a metà della sua altezza. La proprietà di trasformazione è perfetta per questo.

Lo svantaggio di questo metodo è che non può essere utilizzato se l'unità interna ha un posizionamento assoluto.

Allineamento con Flexbox

Il modo più moderno di allineamento verticale è utilizzare il layout flessibile della scatola (popolarmente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, disponendoli quasi ovunque. L'allineamento centrale per Flexbox è un compito molto semplice.

Il blocco esterno deve essere impostato su display: flex e il blocco interno su margin: auto . E questo è tutto! Bello, non è vero?

Esterno (display: flessibile; larghezza: 200px; altezza: 200px;) .interno (larghezza: 100px; margine: automatico;)
http://jsfiddle.net/c1bgfffq/14/

Lo svantaggio di questo metodo è che Flexbox è supportato solo dai browser moderni.

Quale metodo dovrei scegliere?

È necessario iniziare dalla dichiarazione del problema:

• Per allineare verticalmente il testo, è meglio utilizzare i rientri verticali o la proprietà line-height.
• Per gli elementi posizionati in modo assoluto con un'altezza nota (ad esempio, le icone), il metodo con una proprietà margin-top negativa è l'ideale.
• Per i casi più complessi, quando non si conosce l'altezza del blocco, è necessario utilizzare uno pseudo elemento o la proprietà trasforma.
• Bene, se sei così fortunato da non aver bisogno di supportare le versioni precedenti del browser IE, allora, ovviamente, è meglio usare Flexbox.

Oggi, caro lettore, affronteremo il problema dell'allineamento verticale in un blocco div.

Molto probabilmente sai già dell'esistenza di una meravigliosa proprietà CSS allineamento verticale. E Dio stesso ci ha ordinato di utilizzare proprio questa proprietà per l'allineamento verticale (non per niente ha un nome così autoesplicativo).

Formulazione del problema:È necessario centrare il contenuto di un blocco ad altezza variabile rispetto alla verticale.

Ora iniziamo a risolvere il problema.

E quindi, abbiamo un blocco, la sua altezza può cambiare:

La prima cosa che mi viene in mente è fare la seguente finta:

Ci sono tutte le ragioni per credere che la frase Blocca il contenuto sarà allineato all'altezza centrale del contenitore div.

Ma non c'era! In questo modo non otterremo alcun allineamento centrale previsto. E perché? Sembrerebbe che tutto sia indicato correttamente. Si scopre che questo è il problema: la proprietà allineamento verticale può essere utilizzato solo per allineare il contenuto delle celle della tabella o per allineare gli elementi in linea l'uno rispetto all'altro.

Per quanto riguarda l'allineamento all'interno della cella di una tabella, penso che tutto sia chiaro. Ma spiegherò un altro caso con elementi in linea.

Allineamento verticale degli elementi in linea

Supponiamo di avere una riga di testo suddivisa da tag di riga in parti:

Voi accoglie pezzo testo!

Un tag in linea è un contenitore il cui aspetto non fa sì che il contenuto vada a capo su una nuova riga.

L'azione del tag block fa sì che il contenuto del contenitore vada a capo su una nuova riga.

è un tag di blocco. Se racchiudiamo pezzi di testo in blocchi

, quindi ognuno di essi sarà su una nuova riga. Utilizzando l'etichetta , che, a differenza

, è minuscolo, i contenitori non verranno spostati in una nuova riga, tutti i contenitori resterà sulla stessa linea.

Contenitore comodo da usare quando si specifica una parte del testo con formattazione speciale (evidenziandola con un colore, un font diverso, ecc.)

Per contenitori Applica le seguenti proprietà CSS:

#perviy( allineamento verticale:sub; ) #vtoroy( allineamento verticale:3px; ) #tretiy( allineamento verticale:-3px; )

La riga di testo risultante sarà simile a questa:

Questo non è altro che l'allineamento verticale degli elementi in linea e la proprietà CSS allineamento verticale affronta perfettamente questo compito.

Ci siamo distratti un po', ora torniamo al nostro compito principale.

Allineamento verticale nel contenitore div

Non importa cosa, per l'allineamento all'interno del contenitore div utilizzeremo la proprietà allineamento verticale. Come ho già detto, questa proprietà può essere utilizzata nel caso di allineamento di elementi in linea (abbiamo discusso questo caso in dettaglio sopra e non è adatto a noi per l'allineamento in un contenitore div); non resta che sfruttare il fatto allineamento verticale funziona per le celle della tabella.

Come possiamo usarlo? Non abbiamo una tabella, lavoriamo con un contenitore div.

Ah, risulta essere molto semplice.

Proprietà CSS Schermo ti permette di trasformare il nostro blocco div in una cella di tabella, questo può essere fatto facilmente e naturalmente:

Diciamo che abbiamo un div di classe allineamento testo:

Per questo blocco specifichiamo la seguente proprietà CSS:

Textalign( display: tabella-cella; )

Questa istruzione CSS trasformerà miracolosamente il nostro div in una cella di tabella senza modificarlo visivamente in alcun modo. E per una cella di tabella possiamo applicare la proprietà allineamento verticale completamente e l'allineamento verticale desiderato funzionerà.

Tuttavia, tutto non può finire così semplicemente. Abbiamo un meraviglioso browser IE. Non sa come lavorare con la proprietà visualizzazione: cella-tabella(Ti suggerisco di leggere la tabella che illustra la funzionalità di questa proprietà CSS nei diversi browser sul sito htmlbook.ru). Pertanto, dovremo ricorrere a vari trucchi.

Esistono molti modi per ottenere l'allineamento in un contenitore div per tutti i browser:

• Metodo che utilizza un contenitore div ausiliario aggiuntivo
• Metodo che utilizza l'espressione. È collegato a un complicato calcolo dell'altezza dei blocchi. Non puoi farlo senza la conoscenza di JavaScript.
• Utilizzando la proprietà line-height. Questo metodo è adatto solo per l'allineamento verticale in un blocco di altezza nota e pertanto non è applicabile nel caso generale.
• Utilizzo dell'offset del contenuto assoluto e relativo in caso di browser IE. Questo metodo mi sembra il più comprensibile e semplice. Inoltre, è implementabile per un contenitore div ad altezza variabile. Ci soffermeremo su questo in modo più dettagliato.

Come hai capito, dobbiamo solo risolvere il problema dell'allineamento verticale in IE associato alla sua incomprensione della proprietà visualizzazione: cella-tabella(né IE6, né IE7, né IE8 non conosco questa struttura). Pertanto, utilizzando commento condizionale Specificheremo diverse proprietà CSS specificatamente per i browser IE.

Commento condizionale

Tipologia costruttiva:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

si chiama commento condizionale (attenzione, il tipo di commento condizionale deve corrispondere completamente a quello dell'esempio riportato, fino ad uno spazio).

Le istruzioni contenute in tale commento condizionale verranno eseguite solo se il browser che interpreta questo codice appartiene alla famiglia IE.

Pertanto, utilizzando un commento condizionale, possiamo nascondere una parte di codice da tutti i browser tranne IE.

La soluzione del problema

A causa di tutto questo prezzemolo, dovremo fornire al nostro codice HTML due contenitori aggiuntivi. Ecco come apparirà il nostro blocco di testo:

Per la classe contenitore div textalign Sono impostate le proprietà CSS che allineano il suo contenuto verticalmente per tutti i normali browser (eccetto IE, ovviamente):

Visualizzazione: tabella-cella; allineamento verticale: medio;

E altre due proprietà che impostano la larghezza e l'altezza del blocco:

Larghezza:500px; altezza: 500px;

Questo è abbastanza per allineare il contenuto del contenitore centrato rispetto alla verticale, in tutti i browser tranne IE.

Ora iniziamo ad aggiungere proprietà relative all'allineamento per i browser della famiglia IE(è per loro che abbiamo utilizzato blocchi aggiuntivi div E arco):

Riferendosi all'etichetta div all'interno di un blocco di classe textalign. Per fare ciò è necessario indicare prima il nome della classe e poi, separato da uno spazio, il tag a cui stiamo accedendo.

Textalign div(posizione: assoluta; superiore: 50%;)

Questo design significa: per tutti i tag div all'interno di un blocco con una classe textalign applicare le proprietà elencate.

Di conseguenza, gli stili specificati per il blocco textalign sono modificati:

Textalign( display: table-cell; vertical-align: middle; larghezza: 500px; altezza: 500px; posizione: relativa; )

Ora il punto in alto a sinistra del blocco di testo viene spostato verso il basso del 50%.

Per spiegare cosa sta succedendo, ho disegnato un'illustrazione:

Come potete vedere dalla foto, abbiamo fatto dei progressi. Ma non è tutto! Il punto in alto a sinistra del blocco giallo si è infatti spostato del 50% verso il basso, rispetto al blocco genitore (viola). Ma abbiamo bisogno che sia al cinquanta per cento dell'altezza del blocco viola. centro del blocco giallo, non il suo punto in alto a sinistra.

Ora entrerà in gioco il tag arco e il relativo posizionamento:

Textalign span( posizione: relativa; superiore: -50%; )

Pertanto, abbiamo spostato il blocco giallo verso l'alto del 50% della sua altezza, rispetto alla sua posizione iniziale. Come hai capito, l'altezza del blocco giallo è uguale all'altezza del contenuto centrato. E l'ultima operazione sul contenitore span ha posizionato il nostro contenuto al centro del blocco viola. Evviva!

Imbrogliamo un po'

Prima di tutto dobbiamo nascondere Prezzemolo a tutti i normali browser e aprirlo per IE. Questo può essere fatto, ovviamente, utilizzando un commento condizionale; non per niente lo abbiamo conosciuto:

C'è un piccolo problema. Se il contenuto centrato è troppo alto, ciò porta a conseguenze spiacevoli: c'è un'altezza extra per lo scorrimento verticale.

Soluzione al problema:è necessario aggiungere una proprietà overflow: nascosto bloccare textalign.

Conosci l'immobile nel dettaglio traboccamento possibile nel.

Le istruzioni CSS finali per il blocco textalign ha la forma:

Textalign( display: table-cell; vertical-align: middle; larghezza: 500px; altezza: 500px; posizione: relativa; overflow: nascosto; bordo: 1px nero pieno; )

Mi dispiace, ho dimenticato di menzionare un punto importante. Se provi imposta l'altezza del blocco di classe textalign in percentuale, allora hai niente funzionerà.

Centraggio nel blocco ad altezza variabile

Molto spesso è necessario impostare l'altezza del blocco di una classe textalign non in pixel, ma come percentuale dell'altezza del blocco genitore e allinea il contenuto del contenitore div al centro.

Il problema è che è impossibile farlo per una cella di tabella (ma la classe block textalign si trasforma esattamente in una cella di tabella, grazie alla proprietà display:cella-tabella).

In questo caso è necessario utilizzare un blocco esterno per il quale è specificata la proprietà CSS visualizzazione:tabella e ho già impostato il valore percentuale dell'altezza per esso. Quindi il blocco si è annidato al suo interno, con la direttiva CSS display:cella-tabella, erediterà felicemente l'altezza del blocco genitore.

Per implementare un blocco ad altezza variabile nel nostro esempio, modificheremo leggermente il CSS:

Alla classe textalign modificheremo il valore della proprietà Schermo Con cella della tabella SU tavolo e rimuovere la direttiva di allineamento allineamento verticale: medio. Ora possiamo tranquillamente modificare il valore dell'altezza da 500 pixel, ad esempio, al 100%.

Quindi le proprietà CSS per il blocco della classe textalign sarà simile a questo:

Textalign( display: tabella; larghezza: 500px; altezza: 100%; posizione: relativa; overflow: nascosto; bordo: 1px nero pieno; )

Non resta che implementare la centratura dei contenuti. Per fare ciò, un contenitore div annidato in un blocco di classe textalign(questo è lo stesso blocco giallo nell'immagine), è necessario impostare la proprietà CSS display:cella-tabella, erediterà l'altezza del 100% dal blocco genitore textalign(blocco viola). E nulla ci impedirà di allineare il contenuto del contenitore div nidificato al centro con la proprietà allineamento verticale: medio.

Otteniamo un altro elenco aggiuntivo di proprietà CSS per il blocco div annidato nel contenitore textalign.

Textalign div( display: table-cell; vertical-align: middle; )

Questo è il trucco. Se lo desideri, puoi avere un'altezza variabile con il contenuto centrato.

Per ulteriori informazioni sull'allineamento verticale di un blocco ad altezza variabile, vedere .

Dall'autore: Ti do nuovamente il benvenuto sulle pagine del nostro blog. Nell'articolo di oggi vorrei parlare di varie tecniche di allineamento che possono essere applicate sia ai blocchi che al loro contenuto. In particolare, come allineare i blocchi nei CSS e come allineare il testo.

Allineamento dei blocchi al centro

Nei CSS, centrare un blocco è facile. Questa è la tecnica più conosciuta da molti, ma vorrei parlarne subito, prima di tutto. Ciò significa un allineamento centrato orizzontalmente rispetto all'elemento genitore. Com'è fatto? Diciamo che abbiamo un contenitore e al suo interno si trova il nostro soggetto sperimentale:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Supponiamo che questa sia l'intestazione del sito. Non si estende per tutta la larghezza della finestra e dobbiamo centrarlo. Scriviamo così:

#intestazione( larghezza/larghezza massima: 800px; margine: 0 automatico;

Dobbiamo specificare la larghezza esatta o massima, quindi annotare la proprietà chiave - margin: 0 auto. Imposta i margini esterni della nostra intestazione, il primo valore determina i margini superiore e inferiore e il secondo determina i margini destro e sinistro. Il valore auto dice al browser di calcolare automaticamente il riempimento su entrambi i lati in modo che l'elemento sia esattamente centrato sul suo genitore. Comodo!

Allineamento del testo

Anche questa è una tecnica molto semplice. Per allineare tutti gli elementi in linea, puoi utilizzare la proprietà text-align e i suoi valori: sinistra, destra, centro. Quest'ultimo centra il testo, che è ciò di cui abbiamo bisogno. Puoi anche allineare un'immagine allo stesso modo, perché per impostazione predefinita è anche un elemento in linea.

Allinea il testo verticalmente

Ma questo è più complicato. Per impostazione predefinita, non esiste una proprietà semplice e conosciuta che centra facilmente il testo verticalmente in un contenitore di blocchi. Tuttavia, ci sono diverse tecniche che i progettisti di layout hanno escogitato nel corso degli anni.

Imposta l'altezza del blocco utilizzando il riempimento. Il modo non è impostare un'altezza esplicita utilizzando altezza, ma crearla artificialmente utilizzando i riempimenti in alto e in basso, che dovrebbero essere gli stessi. Creiamo un blocco qualsiasi e scriviamoci le seguenti proprietà:

div( sfondo: #ccc; riempimento: 30px 0; )

div( sfondo: #ccc; imbottitura: 30px 0;

Lo sfondo serve solo a mostrare visivamente i bordi e l'imbottitura. Ora l'altezza del blocco è composta da questi due rientri e dalla linea stessa, e il tutto assomiglia a questo:

Definire l'altezza della linea per il blocco. Penso che questo sia il modo più corretto se devi allineare una riga di testo. Con esso puoi scrivere l'altezza normalmente, usando la proprietà altezza. Successivamente, deve anche impostare l'altezza della linea, uguale all'altezza del blocco nel suo complesso.

div( altezza: 60px; altezza linea: 60px; )

div( altezza: 60px; altezza della linea: 60px;

Il risultato sarà simile all'immagine sopra. Tutto funzionerà anche se aggiungi imbottitura. Tuttavia, solo per una riga. Se hai bisogno di più testo nell'elemento, questo metodo non funzionerà.

Converti un blocco in una cella di tabella. L'essenza di questo metodo è che la cella della tabella ha la proprietà vertical-align: middle, che centra l'elemento verticalmente. Di conseguenza, in questo caso il blocco deve essere impostato come segue:

div( display: tabella-cella; allineamento verticale: centro; )

div( visualizzazione: tabella - cella; allineamento verticale: medio;

Questo metodo è utile perché puoi allineare tutto il testo che desideri al centro. Ma è meglio scrivere display: table nel blocco in cui è annidato il nostro div, altrimenti potrebbe non funzionare.

Bene, eccoci all'ultima tecnica per oggi: questo è l'allineamento verticale dei blocchi stessi. Va detto che, ancora una volta, non esiste alcuna proprietà specificatamente destinata a questo, ma ci sono alcuni trucchi che dovresti conoscere.

Imposta i rientri come percentuale. Se conosci l'altezza di un elemento genitore e inserisci un altro elemento blocco al suo interno, puoi centrarlo utilizzando il riempimento percentuale. Ad esempio, il genitore ha un'altezza di 600 pixel. Inserisci un blocco alto 300 pixel. Quanto è necessario arretrare in alto e in basso per centrarlo? 150 pixel ciascuno, ovvero il 25% dell'altezza del genitore.

Questo metodo consente l'allineamento solo quando le dimensioni consentono i calcoli. E se il tuo genitore ha un'altezza di 887 pixel, non sarai in grado di registrare nulla con precisione, questo è già chiaro.

Inserisci un elemento in una cella della tabella. Ancora una volta, se trasformiamo l'elemento genitore in una cella di tabella, allora il blocco inserito al suo interno verrà automaticamente centrato verticalmente. Per fare ciò, il genitore deve solo impostare vertical-align: middle.

E se oltre a questo scriviamo anche margin: 0 auto, allora l'elemento diventerà centrato orizzontalmente!

Allinea il testo verticalmente nei CSS- un lavoro molto difficile. Ho visto abbastanza persone lottare con questo problema e continuo a trovare errori "critici" quando si tratta di design responsivo vero e proprio.

Ma non temere: se hai già difficoltà con l'allineamento verticale dei CSS, sei nel posto giusto.

Parliamo della proprietà di allineamento verticale dei CSS

Quando ho iniziato a lavorare nello sviluppo web, ho avuto qualche difficoltà con questa proprietà. Ho pensato che dovesse funzionare come una proprietà classica" allineamento del testo" Oh, se solo fosse tutto così semplice...

proprietà CSS di allineamento verticale funziona benissimo con le tabelle, ma non con div o altri elementi. Quando lo usi su un div, allinea l'elemento rispetto ad altri div, ma non il suo contenuto. In questo caso la proprietà funziona solo con display: inline-block; .

vedi esempio

Vogliamo centrare il contenuto, non il div stesso!

Hai due opzioni. Se hai solo elementi div con testo, puoi utilizzare la proprietà line-height. Ciò significa che è necessario conoscere l'altezza dell'elemento, ma non è possibile impostarla. In questo modo il tuo testo sarà sempre al centro.

La verità su questo approccio Allineamento verticale CSS c'è uno svantaggio. Se il testo è su più righe, l'altezza della riga verrà moltiplicata per il numero di righe. Molto probabilmente, in questo caso, ti ritroverai con una pagina strutturata in modo terribile.

Dai un'occhiata a questo esempio

Se il contenuto che desideri centrare è costituito da più di una riga, è meglio utilizzare i div della tabella. Puoi anche usare le tabelle, ma questo non è semanticamente corretto. Se hai bisogno di pause per scopi reattivi, è meglio usare gli elementi div.

Affinché funzioni, deve essere presente un contenitore principale con display: table e al suo interno il numero desiderato di colonne che si desidera centrare utilizzando display: table-cell e vertical-align: middle .

vedi esempio

Perché funziona con il markup della tabella ma non con gli elementi div? Perché le righe nella tabella hanno la stessa altezza. Quando il contenuto di una cella di tabella non utilizza tutto lo spazio in altezza disponibile, il browser aggiunge automaticamente la spaziatura verticale per centrare il contenuto.

proprietà di posizione

Cominciamo con le basi dell'allineamento verticale dei div CSS:

• posizione: statica è l'impostazione predefinita. L'elemento viene visualizzato in base all'ordine HTML;
• posizione: assoluta - utilizzata per determinare la posizione esatta di un elemento. Questa posizione è sempre correlata all'elemento genitore più vicino posizionato relativamente (not statico). Se non determini la posizione esatta di un elemento, ne perderai il controllo. Apparirà in modo casuale, ignorando completamente il flusso del documento. Per impostazione predefinita, l'elemento viene visualizzato nell'angolo in alto a sinistra;
• posizione: relativa - utilizzata per posizionare un elemento rispetto alla sua posizione normale (statica). Questo valore preserva l'ordine del flusso di documenti;
• posizione: fissa - utilizzata per posizionare l'elemento rispetto alla finestra del browser in modo che sia sempre visibile nel viewport.

Nota: alcune proprietà ( top e z-index) funzionano solo se l'elemento è impostato su position (not statico).

Andiamo al sodo!

Vuoi implementare Allineamento centrale verticale CSS? Per prima cosa crea un elemento con posizione e dimensioni relative. Ad esempio: 100% in larghezza e altezza.

Il secondo passaggio può variare a seconda dei browser di destinazione, ma puoi utilizzare una delle due opzioni:

• Vecchia proprietà: è necessario conoscere la dimensione esatta della finestra per rimuovere metà della larghezza e metà dell'altezza. vedi esempio;
• Nuova proprietà CSS3: puoi aggiungere una proprietà di trasformazione con un valore di traduzione del 50% e il blocco sarà sempre al centro. Visualizza esempio.

Fondamentalmente, se vuoi centrare i contenuti, non usare mai la parte superiore: 40% o sinistra: 300px . Funziona bene sulle schermate di prova, ma non è centrato.

Ricorda posizione: fissa? Puoi fare la stessa cosa che con una posizione assoluta, ma non hai bisogno di una posizione relativa per l'elemento genitore: sarà sempre posizionato rispetto alla finestra del browser.

Hai sentito parlare delle specifiche flexbox?

Puoi usare Flexbox. Questo è molto meglio di qualsiasi altra opzione centrare l'allineamento del testo CSS verticalmente. Con flexbox la gestione degli elementi è come un gioco da ragazzi. Il problema è che alcuni browser devono essere scartati, come IE9 e le versioni seguenti. Ecco un esempio di come centrare verticalmente un blocco:

Visualizza esempio

Utilizzando un layout flexbox, puoi centrare più blocchi.

Se applichi ciò che impari da questi esempi, puoi padroneggiarlo Allineamento verticale dei blocchi CSS appena possibile.

Link e approfondimenti

Imparare il markup CSS

FlexBox Rana

Sabbiera Flexbox

Traduzione dell’articolo “ Allineamento verticale CSS per tutti (manichini inclusi)" è stato preparato dal simpatico team di progetto.

Penso che molti di voi che hanno avuto a che fare con il layout abbiano riscontrato la necessità di allineare gli elementi verticalmente e conoscano le difficoltà che sorgono quando si allinea un elemento al centro.

Sì, esiste una speciale proprietà di allineamento verticale multivalore nei CSS per l'allineamento verticale. Tuttavia, in pratica non funziona affatto come previsto. Proviamo a capirlo.

Confrontiamo i seguenti approcci. Allinea utilizzando:

• tavoli,
• rientranza,
• altezza della linea
• allungamento,
• margine negativo,
• trasformare
• pseudoelemento
• flexbox.

Per illustrare, considerare il seguente esempio.

Sono presenti due elementi div, uno dei quali annidato nell'altro. Diamo loro le classi corrispondenti: esterna e interna.

La sfida è allineare l'elemento interno con il centro dell'elemento esterno.

Innanzitutto, consideriamo il caso in cui le dimensioni dei blocchi esterni ed interni conosciuto. Aggiungiamo la regola display: inline-block all'elemento interno e text-align: center e vertical-align: middle all'elemento esterno.

Ricorda che l'allineamento si applica solo agli elementi che hanno una modalità di visualizzazione in linea o blocco in linea.

Impostiamo le dimensioni dei blocchi e i colori dello sfondo in modo da poterne vedere i bordi.

Esterno ( larghezza: 200px; altezza: 200px; allineamento testo: centro; allineamento verticale: centro; colore sfondo: #ffc; ) .interno ( display: blocco in linea; larghezza: 100px; altezza: 100px; colore sfondo : #fcc; )
Dopo aver applicato gli stili, vedremo che il blocco interno è allineato orizzontalmente, ma non verticalmente:
http://jsfiddle.net/c1bgfffq/

Perchè è successo? Il fatto è che la proprietà di allineamento verticale influisce sull'allineamento l'elemento stesso, non il suo contenuto(tranne quando viene applicato alle celle della tabella). Pertanto, l'applicazione di questa proprietà all'elemento esterno non ha prodotto nulla. Inoltre, anche applicare questa proprietà a un elemento interno non avrà alcun effetto, poiché i blocchi inline sono allineati verticalmente rispetto ai blocchi adiacenti e nel nostro caso abbiamo un blocco inline.

Esistono diverse tecniche per risolvere questo problema. Di seguito daremo uno sguardo più da vicino a ciascuno di essi.

Allineamento tramite tabella

La prima soluzione che mi viene in mente è sostituire il blocco esterno con una tabella di una cella. In questo caso l'allineamento verrà applicato al contenuto della cella, cioè al blocco interno.

http://jsfiddle.net/c1bgfffq/1/

L'ovvio svantaggio di questa soluzione è che, da un punto di vista semantico, non è corretto utilizzare le tabelle per l'allineamento. Il secondo svantaggio è che per creare una tabella è necessario aggiungere un altro elemento attorno al blocco esterno.

Il primo meno può essere parzialmente rimosso sostituendo i tag table e td con div e impostando la modalità di visualizzazione della tabella nei CSS.

.outer-wrapper ( display: tabella; ) .outer ( display: tabella-cella; )
Tuttavia, il blocco esterno rimarrà comunque un tavolo con tutte le conseguenze che ne conseguiranno.

Allineamento tramite rientri

Se si conoscono le altezze dei blocchi interno ed esterno, è possibile impostare l'allineamento utilizzando i rientri verticali del blocco interno utilizzando la formula: (H esterno – H interno) / 2.

Esterno (altezza: 200px; ) .interno (altezza: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Lo svantaggio della soluzione è che è applicabile solo in un numero limitato di casi quando si conoscono le altezze di entrambi i blocchi.

Allineamento utilizzando l'altezza della linea

Se sai che il blocco interno non deve occupare 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 deve estendersi alla seconda riga, si consiglia di aggiungere anche lo spazio bianco: nowrap e overflow: hidden rule.

Esterno (altezza: 200px; altezza linea: 200px;) .interno (spazio bianco: nowrap; overflow: nascosto;)
http://jsfiddle.net/c1bgfffq/12/

Questa tecnica può essere utilizzata anche per allineare il testo su più righe se si ridefinisce il valore dell'altezza della riga per il blocco interno e si aggiungono anche le regole display: inline-block e vertical-align: middle.

Esterno (altezza: 200px; altezza della linea: 200px;) .interno (altezza della linea: normale; display: blocco in linea; allineamento verticale: centrale;)
http://jsfiddle.net/c1bgfffq/15/

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza del blocco esterno.

Allineamento utilizzando "stretch"

Questo metodo può essere utilizzato quando l'altezza del blocco esterno non è nota, ma è nota l'altezza del blocco interno.

Per fare questo è necessario:

1. impostare il posizionamento relativo al blocco esterno e il posizionamento assoluto al blocco interno;
2. aggiungi le regole top: 0 e bottom: 0 al blocco interno, in conseguenza del quale si allungherà fino all'intera altezza del blocco esterno;
3. imposta il riempimento verticale del blocco interno su automatico.

.outer ( posizione: relativa; ) .inner ( altezza: 100px; posizione: assoluta; superiore: 0; inferiore: 0; margine: automatico 0; )
http://jsfiddle.net/c1bgfffq/4/

L'idea alla base di questa tecnica è che l'impostazione di un'altezza per un blocco allungato e posizionato in modo assoluto fa sì che il browser calcoli il riempimento verticale in un rapporto uguale se è impostato su auto .

Allineamento con margine negativo superiore

Questo metodo è diventato ampiamente conosciuto e viene utilizzato molto spesso. Come il precedente, si usa quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno.

È necessario impostare il blocco esterno sul posizionamento relativo e il blocco interno sul posizionamento assoluto. Quindi devi spostare il blocco interno verso il basso di metà dell'altezza del blocco esterno top: 50% e sollevarlo di metà della sua altezza margin-top: -H inner / 2.

Esterno (posizione: relativa;) .interno (altezza: 100px; posizione: assoluta; superiore: 50%; margine superiore: -50px;)
http://jsfiddle.net/c1bgfffq/13/

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza dell'unità interna.

Allineamento con trasformazione

Questo metodo è simile al precedente, ma può essere utilizzato quando non si conosce l'altezza dell'unità interna. In questo caso, invece di impostare un riempimento pixel negativo, puoi utilizzare la proprietà trasforma e spostare il blocco interno verso l'alto utilizzando la funzione TranslateY e un valore di -50% .

Esterno ( posizione: relativa; ) .interno ( posizione: assoluta; superiore: 50%; trasformazione: traduciY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Perché era impossibile impostare il valore come percentuale nel metodo precedente? Poiché i valori del margine percentuale sono calcolati rispetto all'elemento genitore, un valore del 50% sarebbe la metà dell'altezza del riquadro esterno e dovremmo alzare il riquadro interno a metà della sua altezza. La proprietà di trasformazione è perfetta per questo.

Lo svantaggio di questo metodo è che non può essere utilizzato se l'unità interna ha un posizionamento assoluto.

Allineamento con Flexbox

Il modo più moderno di allineamento verticale è utilizzare il layout flessibile della scatola (popolarmente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, disponendoli quasi ovunque. L'allineamento centrale per Flexbox è un compito molto semplice.

Il blocco esterno deve essere impostato su display: flex e il blocco interno su margin: auto . E questo è tutto! Bello, non è vero?

Esterno (display: flessibile; larghezza: 200px; altezza: 200px;) .interno (larghezza: 100px; margine: automatico;)
http://jsfiddle.net/c1bgfffq/14/

Lo svantaggio di questo metodo è che Flexbox è supportato solo dai browser moderni.

Quale metodo dovrei scegliere?

È necessario iniziare dalla dichiarazione del problema:

• Per allineare verticalmente il testo, è meglio utilizzare i rientri verticali o la proprietà line-height.
• Per gli elementi posizionati in modo assoluto con un'altezza nota (ad esempio, le icone), il metodo con una proprietà margin-top negativa è l'ideale.
• Per i casi più complessi, quando non si conosce l'altezza del blocco, è necessario utilizzare uno pseudo elemento o la proprietà trasforma.
• Bene, se sei così fortunato da non aver bisogno di supportare le versioni precedenti del browser IE, allora, ovviamente, è meglio usare Flexbox.

Tag: aggiungi tag