Se l'hai mai provato, questo è complicato, specialmente se vuoi evitare di usare le tabelle. Fortunatamente, le nostre grida di aiuto sono state ascoltate e una delle nuove armi aggiunte all'arsenale CSS per affrontare questo problema è un tipo di layout noto come layout di scatola flessibile. Come scoprirai tra pochi istanti, che ti fornisce alcune funzionalità davvero fantastiche per semplificare layout complessi. Alcune di queste fantastiche funzionalità ti consentono anche di centrare i tuoi contenuti verticalmente e orizzontalmente, che è ciò che tratteremo in questo tutorial. Puoi farlo con il riempimento in una certa misura, ma può spingere il tuo layout su schermi più piccoli. L'aggiunta di una classe CSS personalizzata al tuo foglio di stile significa che puoi centrare verticalmente qualsiasi contenuto in pochi secondi.
L'allineamento orizzontale determina il modo in cui i bordi sinistro e destro di un paragrafo sono allineati tra i bordi sinistro e destro della casella di testo. L'allineamento verticale determina la posizione verticale del carattere nella casella di testo. La mancanza di buoni modi per centrare verticalmente gli elementi nei CSS era un oscuro difetto nella sua reputazione per quasi tutta la sua esistenza.
Primo metodo con l'altezza della linea
Il primo metodo è semplice e alquanto banale, dove ci sono degli inconvenienti che ci sarà una limitazione nell'applicazione. Quando si codificano pagine html per un sito, l'interlinea del contenuto del testo è probabilmente uno degli attributi che di solito rimane l'impostazione predefinita. In generale, dobbiamo impostare l'altezza della linea stessa, che ha un'altezza simile per il blocco dove altezza della linea proprietà.
Questo è il primo metodo mostrato nelle demo
CSS
Constutesim_first (
bordo: solido 2px # bf1515;
altezza: 175 px;
}
.constutesim_first> p (
altezza della linea: 175 px;
margine: 0;
allineamento del testo: centro;
imbottitura: 0;
dimensione del carattere: 17px;
colore: # 3152a0;
famiglia di caratteri: Tahoma;
font-weight: grassetto;
}
Puoi anche vedere a colpo d'occhio come sarà tutto nella realtà.
Con un metodo simile, è possibile implementare come esporre l'immagine, che sarà al centro e sicuramente in verticale. Resta solo da registrare una proprietà vertical-align: middle; che è responsabile della visualizzazione dell'immagine.
CSS
Seconda variante (
bordo: 2px rosso pieno;
altezza della linea: 158px;
}
Div seconda variante (
allineamento del testo: centro;
}
.seconda variazione img (
allineamento verticale: medio;
bordo: 0px solido # 3a3838;
}
Realizziamo immagini al centro e in direzione verticale.
Allineamento con la proprietà position
Questa è probabilmente la tecnica più conosciuta, ma la più comune per l'uso con i CSS. Ma qui bisogna aggiungere che anche questo non è l'ideale, e anche questo metodo ha le sue piccole sfumature che sono associate al centro dell'elemento, che se è impostato in percentuale, sarà centrato sul lato sinistro dell'elemento lato superiore, all'interno del blog stesso.
CSS
Opzione Competiird (
bordo: 2px solido # d40e0e;
altezza: 162px;
posizione: relativa;
}
.competird-option div (
posizione: assoluta;
superiore: 50%;
sinistra: 50%;
altezza: 28%;
larghezza: 49%;
margine: -2% 0 0 -25%;
bordo: 2px solido # 4a4848;
}
L'interlinea o l'altezza della riga è l'altezza verticale tra le righe di testo in una pagina HTML sottoposta a rendering. Quasi sempre, questo valore di distanza è impostato sul valore corrispondente dal browser o dal renderer. Questo valore di solito dipende dal carattere della pagina visualizzata e da altri fattori.
Allineamento con la proprietà della tabella
In questo metodo, utilizziamo il vecchio metodo collaudato, in cui riformeremo gli elementi in una tabella in cui si trovano le celle. Per quanto riguarda il tag chiamato table, non verrà utilizzato qui, qui imposteremo proprietà CSS completamente diverse, questa è display: table ;, display: table-cell ;. Se parliamo delle versioni più vecchie di IE, i dati qui semplicemente non verranno visualizzati. Spero che tu abbia aggiornato il tuo browser, poiché diventa obsoleto e quasi tutto non viene visualizzato correttamente.
Cherevert-variante (
bordo: 2px solido # c30b0b;
altezza: 173px;
display: tabella;
larghezza: 100%;
dimensione del carattere: 17px;
font-weight: grassetto;
colore: # 3945a0;
}
Cherevert-variazione div (
display: cella-tabella;
allineamento verticale: medio;
allineamento del testo: centro;
}
Prima di tutto, diamo un'occhiata al valore predefinito utilizzato dalla maggior parte dei browser. Nella maggior parte dei browser diurni moderni, l'interlinea.
Allineamento con la proprietà flex
Qui arriviamo a una versione più originale, che ha le sue proprietà, che raramente si trovano nel layout di una risorsa Internet. Ma ancora sono applicati, che in alcuni casi sono utili. Questo imposta l'asse principale in modo che la definizione della direzione di flessione si adatti al contenitore floppy.
CSS
Variante-orizzontale (
bordo: 2px solido # d20c0c;
altezza: 147px;
display: flessibile;
allinea-oggetti: centro;
giustificare-contenuto: centro;
dimensione del carattere: 18px;
font-weight: grassetto;
colore: # 49518c;
}
Puoi specificare un valore per l'altezza della linea proprio come indicheresti qualsiasi altra dimensione in css, sia come numero, dimensione in pixel o come percentuale.
Allineamento con la proprietà di trasformazione
E ora siamo arrivati al metodo più estremo, ma non all'ultimo in termini di utilizzo nel web design. Qui tutto è semplice, devi spostare verticalmente l'elemento specificato in base al valore di cui hai bisogno. Proprietà trasformare, questo è un elenco di trasformazioni che il programma di installazione applica durante l'installazione del pacchetto. Il programma di installazione applica le trasformazioni nell'ordine in cui sono specificate nella proprietà.
CSS
Medilpasudsa verticale (
bordo: 2px solido # e00a0a;
altezza: 158px;
dimensione del carattere: 19px;
font-weight: grassetto;
colore: # 353c71;
}
.vertical-medilpasudsa> div (
posizione: relativa;
superiore: 50%;
trasforma: translateY (-50%);
allineamento del testo: centro;
}
Quando fornisci i valori come numero, sarà basato sulla dimensione del carattere corrente come base. La dimensione del carattere corrente viene moltiplicata per il numero specificato per calcolare l'altezza della riga o lo spazio tra le righe.
Se vuoi centrare i caratteri orizzontalmente in un elemento, devi usare text-align: center. Un'opzione, se vuoi centrarlo verticalmente e hai un piè di pagina fisso e una riga di testo, imposta l'altezza della riga in modo che corrisponda all'altezza del piè di pagina.
Se devi centrare il testo all'interno di un elemento come un div, un'intestazione o un paragrafo, puoi utilizzare la proprietà CSS text-align.
Text-align ha diverse proprietà valide:
Centro: La trama è centrata;
sinistra: Si allineerà al lato sinistro del contenitore;
Giusto: Allineato al lato destro del contenitore
giustificare: Obbligato ad allinearsi, sia sul bordo sinistro che sul bordo destro del contenitore, ad eccezione delle linee estreme;
giustificare-tutto: Fa sì che la linea estrema giustifichi i caratteri;
inizio: Come a sinistra, solo se la direzione va da sinistra a destra. Ma sarà corretto se inizialmente imposti la direzione della direzione del testo, che avverrà da destra a sinistra;
Fine: L'opposto dell'inizio;
partita genitore: Simile all'ereditarietà, ad eccezione dell'inizio e della fine, viene calcolata rispetto all'elemento padre;
Usa queste proprietà per allineare il testo all'interno di un div padre o a capo. Se vuoi centrare il testo orizzontalmente in un elemento, devi usare text-align: center.
Un'opzione, se vuoi centrarlo verticalmente, se hai un'intestazione fissa e una riga di testo, imposta l'altezza della riga in modo che corrisponda all'altezza del tuo piè di pagina.
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.
Il problema del centraggio verticale degli elementi nei CSS ha una serie di soluzioni pronte all'uso. La scelta del metodo di allineamento in ogni caso dipende dal tipo, dalle dimensioni, dal posizionamento degli elementi e da altre proprietà da essi impostate.
Di seguito sono riportate le tecniche di allineamento verticale popolari tra i progettisti di layout. Mostra come funzionano e per quali casi ciascuno è più adatto.
Ecco due div:
Ciascuno dei metodi verrà applicato per allineare l'unità interna al centro dell'unità esterna.
altezza della linea per una linea
Quando il genitore si estende su una riga di testo e l'altezza del figlio è nota, è possibile applicare la proprietà line-height. Il valore della proprietà deve essere uguale all'altezza del blocco esterno. Funziona solo per una riga, quindi è utile per i posteri aggiungere overflow: nascosto e non consentire il wrapping della linea spazio bianco: nowrap.
Non sarai in grado di utilizzare la percentuale line-height = 100%, perché 100% in questo caso è l'altezza del carattere.
contenitore (
altezza: 300 px;
altezza della linea: 300 px;
}
Interno (
spazio bianco: nowrap;
trabocco: nascosto;
}
Il metodo è applicabile solo quando si conosce l'altezza dell'unità esterna.
Tavolo con allineamento verticale
Per l'allineamento verticale degli elementi, un tavolo è più adatto. Per non rompere la semantica, è meglio creare elementi di tabella usando i CSS. La posizione del contenuto della cella è controllata dall'allineamento verticale. Ci sono quattro valori di questa proprietà che funzionano nelle tabelle:
Linea di base - predefinita;
... fondo - contenuto nella parte inferiore della cella;
... medio - contenuto nel mezzo della cella;
... top è il contenuto nella parte superiore della cella.
Nel primo esempio, una cella di tabella solitaria diventa il blocco esterno.
contenitore (
display: cella-tabella;
allineamento verticale: medio;
}
Il metodo è buono perché funziona per elementi senza un'altezza specificata, ma in alcuni casi il suo utilizzo è ostacolato dal fatto che il blocco esterno, come qualsiasi cella di tabella, si adatta in larghezza al suo contenuto e può essere allungato solo specificando la larghezza per la larghezza in modo esplicito. Per una cella senza tabella, le percentuali non funzionano bene.
Questo difetto viene corretto avvolgendo la cella in un genitore con una proprietà display: table. Questo elemento può essere dimensionato in percentuale. Il codice finale sarà simile a questo:
Involucro esterno (
display: tabella;
}
contenitore (
display: cella-tabella;
allineamento verticale: medio;
}
Posizione: assoluta + margine negativo
Il metodo viene utilizzato quando si conosce l'altezza dell'elemento interno. Potrebbe non essere noto all'unità esterna. Al genitore viene assegnato un posizionamento relativo e il bambino al suo interno è assoluto.
Un valore della proprietà superiore del 50% impone che l'elemento nidificato sia centrato in alto nel riquadro esterno. Non resta che sollevarlo con un margine negativo, metà superiore della propria altezza, in modo che sia esattamente centrato verticalmente.
contenitore (
posizione: relativa;
}
Interno (
altezza: 140px;
posizione: assoluta;
superiore: 50%;
margine superiore: -70px;
}
Lo svantaggio di questo metodo è che è necessario conoscere l'altezza del bambino.
Allinea in linea con l'allineamento verticale
L'allineamento degli elementi in linea e del blocco in linea, incluse immagini e icone, nel testo circostante viene eseguito con la proprietà di allineamento verticale. A differenza di una tabella, in questo caso funziona l'intero insieme dei suoi valori specificati nelle specifiche.
Se l'altezza del genitore è nota, questa proprietà può essere utilizzata per centrare il testo su più righe.
Per il blocco esterno è prescritto il centraggio di una linea.
contenitore (
altezza: 140px;
altezza della linea: 140 px;
}
Il valore dell'altezza della linea per l'unità interna viene sovrascritto su normale o su qualsiasi importo richiesto. Viene anche fornito l'allineamento verticale: allineamento centrale e conversione al tipo di blocco in linea - display: blocco in linea.
Interno (
display: blocco in linea;
altezza della linea: normale;
allineamento verticale: medio;
}
Lo svantaggio di questo metodo è che è necessario conoscere l'altezza del genitore.
Allineamento con trasformazione
La funzione translateY della proprietà transform consente di centrare un blocco interno con un'altezza sconosciuta. Per fare ciò, il genitore deve essere posizionato relativamente e il bambino assolutamente.
La proprietà top con un valore del 50% abbassa il riquadro interno in modo che il suo bordo superiore si trovi al centro del genitore. Valore TranslateY: -50%, alza l'elemento della metà della propria altezza e allinea così i centri verticali delle scatole.
contenitore (
posizione: relativa;
}
Interno (
posizione: assoluta;
superiore: 50%;
trasforma: translateY (-50%);
}
Svantaggio del supporto limitato di IE per le funzioni di trasformazione.
Allinea tramite pseudo-elemento
Il metodo funziona quando l'altezza non è nota né per il primo né per il secondo blocco. Lo pseudo-elemento inline-block viene aggiunto all'interno del genitore usando prima o dopo. L'altezza dell'elemento aggiunto deve essere uguale all'altezza del genitore - altezza: 100%. L'allineamento verticale del contenuto viene specificato utilizzando vertical-align: middle.
Con vertical-align: middle, la scatola interna è allineata rispetto a questo pseudo-elemento. Poiché il genitore e il figlio hanno la stessa altezza, l'elemento interno, quando allineato verticalmente con lo pseudo-elemento, è centrato anche con la scatola esterna.
Contenitore: prima (
contenuto: "";
altezza: 100%;
allineamento verticale: medio;
display: blocco in linea;
}
Interno (
display: blocco in linea;
allineamento verticale: medio;
}
Un modo universale. Non funziona se è specificato il posizionamento assoluto per l'unità interna.
Flexbox
Il modo più nuovo e più semplice per allineare verticalmente gli elementi. Flexbox ti permette di organizzare gli elementi di una pagina Web nel modo che preferisci. Per allineare il blocco al centro è sufficiente scrivere display: flex al genitore e margin: auto al figlio.
contenitore (
display: flessibile;
larghezza: 320px;
altezza: 140px;
}
Interno (
larghezza: 120px;
margine: automatico;
}
Flexbox funziona solo nei browser moderni.
Scelta del metodo
Quale tecnica di allineamento verticale utilizzare dipende dall'attività e dalle limitazioni che possono essere presenti in quel caso particolare.
Altezza elemento sconosciuta
In questa situazione, puoi utilizzare uno dei quattro metodi universali:
1. Tabella. Il genitore è una cella di tabella creata in HTML o tramite display-table / display-cell. Questo elemento genitore è assegnato vertical-align: middle.
2. Pseudo-elemento. Per il riquadro esterno, viene creato uno pseudo-elemento di blocco in linea con larghezza = 100% e allineamento verticale: centro. Al discendente viene assegnata la visualizzazione: inline-block e vertical-align: middle. Il metodo non funziona solo quando è specificato il posizionamento assoluto per l'unità interna.
3. Trasforma. Il genitore ottiene la posizione: relativa. Al figlio viene assegnata la posizione: assoluta, top: 50% e transform: translateY (-50%);
4. Flexbox. Il blocco esterno è impostato su display: flex e il blocco interno è impostato su margin: auto.
Si conosce solo l'altezza del discendente
Il blocco esterno è posizionato relativamente; all'elemento interno viene assegnato un posizionamento assoluto, top: 50% e un margin-top pari alla metà della sua altezza.
Una riga in un blocco con altezza nota
Il box esterno è impostato su una proprietà line-height con un valore uguale alla sua altezza.
L'altezza del blocco esterno è nota, ma l'altezza dell'elemento interno no.
Al genitore viene assegnata un'altezza della linea uguale alla sua altezza. Nel discendente, il valore dell'altezza della linea viene sovrascritto su normale o su qualsiasi valore desiderato e visualizza: blocco in linea e allineamento verticale: centro sono impostati su di esso.
L'articolo di oggi mira a mostrarti come centrare un div, sia orizzontalmente che verticalmente, con alcuni trucchi CSS. Ti mostreremo anche come centrare l'intera pagina o in un singolo elemento div.
Facile centraggio di un DIV sulla pagina
Questo metodo funzionerà alla grande in tutti i browser.
CSS
Center-div (margine: 0 auto; larghezza: 100 px;)
Esempio
Il valore auto nella proprietà margin imposta il padding sinistro e destro su qualsiasi spazio disponibile nella pagina. La cosa importante da ricordare qui è che il div centrato deve essere impostato su width.
Centrare il DIV all'interno del DIV alla vecchia maniera
Questo metodo di allineamento del centro div funzionerà in tutti i browser.
CSS
Div esterno (imbottitura: 30 px;) .div interno (margine: 0 auto; larghezza: 100 px;)
HTML
Esempio
Il div esterno può essere posizionato come preferisci, ma il div interno deve avere una larghezza ( larghezza).
Centrare un DIV all'interno di un elemento DIV utilizzando inline-block
In questo metodo di centraggio di un div all'interno di un div, non è necessario specificare la larghezza dell'elemento interno. Funzionerà in tutti i browser moderni incluso IE8.
CSS
Outer-div (padding: 30px; text-align: center;) .inner-div (display: inline-block; padding: 50px;)
HTML
Esempio
La proprietà text-align funziona solo sugli elementi in linea. Il valore inline-block consente di visualizzare il div interno come elemento inline oltre che come blocco ( inline-block). La proprietà text-align sul div esterno ci consentirà di centrare il div interno.
Centrare il DIV all'interno dell'elemento DIV orizzontalmente e verticalmente
Qui, margin: auto è usato per centrare il div al centro della pagina. L'esempio funzionerà in tutti i browser moderni.
CSS
Div esterno (imbottitura: 30 px;) .div interno (margine: auto; larghezza: 100 px; altezza: 100 px;)
HTML
Esempio
Il div interno deve avere una larghezza ( larghezza) e altezza ( altezza). Il metodo avrà esito negativo se il div esterno ha un'altezza fissa.
Centrare il DIV in fondo alla pagina
Qui usiamo margin: auto e il posizionamento assoluto per l'elemento esterno per posizionare il div verticalmente centrato. Il metodo funzionerà in tutti i browser moderni.
CSS
Div esterno (posizione: assoluta; fondo: 30 px; larghezza: 100%;) .div interno (margine: 0 auto; larghezza: 100 px; altezza: 100 px; colore di sfondo: #ccc;)
HTML
Esempio
Il div interno deve avere una larghezza impostata. Lo spazio in fondo alla pagina è controllato dalla proprietà bottom del div esterno. Puoi anche centrare il div nella parte superiore della pagina sostituendo la proprietà bottom con la proprietà top.
Centrare il DIV verticalmente e orizzontalmente sulla pagina
Qui, per allineare il div al centro, usa ancora margin: auto e il posizionamento assoluto del div esterno. Il metodo funzionerà in tutti i browser moderni.
CSS
Center-div (posizione: assoluta; margine: auto; in alto: 0; a destra: 0; in basso: 0; a sinistra: 0; larghezza: 100 px; altezza: 100 px;)
Esempio
L'elemento div deve avere una larghezza impostata ( larghezza) e altezza ( altezza).
Centratura reattiva dell'elemento DIV sulla pagina
Qui, per centrare l'allineamento del div con i CSS, rendiamo reattiva la larghezza del div in modo che risponda ai cambiamenti della finestra. Questo metodo funziona in tutti i browser.
CSS
Center-div (margine: 0 auto; larghezza massima: 700 px;)
Esempio
Il div centrato deve avere la proprietà max-width impostata.
Centrare il DIV all'interno dell'elemento utilizzando le proprietà del blocco interno
Il div interno è reattivo qui. Questo metodo per centrare i div all'interno dei div funzionerà in tutti i browser.
CSS
Outer-div (imbottitura: 30px;) .inner-div (margine: 0 auto; larghezza massima: 700px;)
HTML
Esempio
Il div interno deve avere la proprietà max-width impostata.
Centra due div reattivi uno accanto all'altro
Qui abbiamo due div reattivi fianco a fianco. Questo metodo per impostare il div al centro dello schermo funzionerà con tutti i browser moderni.
CSS
Contenitore (text-align: center;) .left-div (display: inline-block; max-width: 300px; vertical-align: top;) .right-div (display: inline-block; max-width: 150px; ) schermo e (larghezza massima: 600 px) (.div-sinistra, .div-destra (larghezza massima sinistra: 100%;))
HTML
Esempio
Qui abbiamo diversi elementi di blocco in linea all'interno di un contenitore centrato. Questo esempio utilizza anche query multimediali CSS; ovvero, se la dimensione dello schermo è inferiore a 600 pixel, la proprietà max-width sia per il div sinistro che per quello destro è impostata su 100%.
Elemento DIV centrato con Flexbox
Qui centriamo il div CSS con Flexbox. Ha lo scopo di facilitare il processo di progettazione dell'interfaccia utente. Questo plug-in è supportato da Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ e Android Browser 40+.
CSS
Contenitore (display: flex; align-items: center; require-content: center; height: 100vh;) .item (background-color: # f3f2ef; border-radius: 3px; width: 200px; height: 100px;)
Oggi, caro lettore, affronteremo il problema dell'allineamento verticale in un blocco. div.
Molto probabilmente conosci già la meravigliosa proprietà CSS allineamento verticale. E Dio stesso ci ha detto di usare questa proprietà per l'allineamento verticale (non per niente ha un nome così autoesplicativo).
Formulazione del problema:È necessario centrare il contenuto del blocco ad altezza variabile rispetto alla verticale.
Ora passiamo alla risoluzione del problema.
E così, abbiamo un blocco, la sua altezza può cambiare:
La prima cosa che viene in mente è di fare il seguente trucco:
Ci sono tutte le ragioni per credere che la frase Blocca contenuto si allineerà al centro dell'altezza del div del contenitore.
Ma non c'era! In questo modo non otterremo alcun allineamento al centro previsto. E perché? Sembrerebbe che tutto sia indicato correttamente. Si scopre che questo è il trucco: 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 della tabella, penso che sia tutto chiaro. Spiegherò un altro caso con elementi in linea.
Allineamento verticale degli elementi in linea
Supponiamo di avere una stringa di testo interrotta da tag in linea in parti:
Voi dà il benvenuto pezzo testo!
Un tag in linea è inteso come un contenitore, il cui aspetto non comporta l'avvolgimento del contenuto in una nuova riga.
L'azione del tag block porta all'avvolgimento del contenuto del contenitore su una nuova riga.
È un tag di blocco. Se racchiudiamo pezzi di testo in blocchi, quindi ognuno di essi apparirà su una nuova riga. Usando il tag che, a differenza di, è minuscolo, non verrà eseguito il wrapping dei contenitori su una nuova riga, tutti i contenitori rimanere su una riga.Contenitore È comodo da usare quando si specifica una parte del testo con una formattazione speciale (evidenziazione con colore, un carattere diverso, ecc.)
Per contenitori applicare le seguenti proprietà CSS:
#perviy (allineamento verticale: sub;) #vtoroy (allineamento verticale: 3px;) #tretiy (allineamento verticale: -3px;)
Di conseguenza, la riga di testo 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.
Divaghiamo un po', ora torniamo al nostro compito principale.
Allineamento verticale in un contenitore div
Indipendentemente da ciò, useremo la proprietà per allineare all'interno del contenitore div. allineamento verticale... Come ho già detto, questa proprietà può essere utilizzata nel caso di allineamento di elementi inline (abbiamo discusso questo caso in dettaglio sopra e non ci soddisfa per l'allineamento in un contenitore div); resta solo da usare il fatto che allineamento verticale funziona per le celle della tabella.
Come possiamo usare questo? Non abbiamo una tabella, stiamo lavorando con un contenitore div.
Ha, risulta essere molto semplice.
Proprietà CSS Schermo ci permette di trasformare il nostro blocco div in una cella di tabella, può essere fatto facilmente e naturalmente:
Facciamo un div di classe allineamento testo:
Blocca contenutoPer questo blocco, specifica la seguente proprietà CSS:
Allineamento testo (visualizzazione: cella di tabella;)
Questa istruzione CSS trasformerà miracolosamente il nostro div in una cella di tabella senza alterarla visivamente in alcun modo. E per una cella di tabella, possiamo applicare la proprietà allineamento verticale l'allineamento verticale desiderato funzionerà completamente.
Tuttavia, tutto non può finire in modo così semplice. Abbiamo un meraviglioso browser IE. Non sa come lavorare con la proprietà display: cella-tabella(Suggerisco di familiarizzare con la tabella che illustra le prestazioni di questa proprietà CSS in diversi browser sul sito Web htmlbook.ru). Pertanto, dovremo andare a vari trucchi.
Esistono molti modi per ottenere l'allineamento in un contenitore div per tutti i browser:
- Metodo che utilizza un cotneyer div ausiliario aggiuntivo
- Metodo che utilizza l'espressione. È associato a un calcolo intelligente delle altezze dei blocchi. La conoscenza di JavaScript è indispensabile qui.
- Usando la proprietà line-height. Questo metodo è adatto solo per l'allineamento verticale in un blocco di altezza nota, il che significa che generalmente non è applicabile.
- Utilizzo dell'offset di contenuto assoluto e relativo in caso di browser IE. Questo metodo mi sembra il più chiaro e semplice. Inoltre, è implementabile per un contenitore ad altezza variabile div. Ci soffermeremo su di esso in modo più dettagliato.
Come capisci, resta a noi da risolvere il problema dell'allineamento verticale in IE, associato al suo malinteso della proprietà display: cella-tabella(né IE6, né IE7, né IE8 non hanno familiarità con questa proprietà). Pertanto, utilizzando commento condizionale specificamente per i browser della famiglia IE, specificheremo altre proprietà CSS.
Commento condizionale
Tipo di disegno:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
è chiamato commento condizionale (attenzione, la forma di un commento condizionale deve corrispondere completamente all'esempio dato, fino a 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, avremo bisogno di alimentare il nostro HTML con due contenitori aggiuntivi. Ecco come apparirà il nostro blocco di testo:
Questo è un tipo di testo di verifica.
Si compone di due linee.Per contenitore di classe div allineare il testo imposta le proprietà CSS che allineano il suo contenuto verticalmente per tutti i normali browser (tranne IE, ovviamente):
Display: cella-tabella; allineamento verticale: medio;
E altre due proprietà che impostano la larghezza e l'altezza per il blocco:
Larghezza: 500 px; altezza: 500 px;
Questo è abbastanza per allineare il contenuto del contenitore al centro rispetto alla verticale, in tutti i browser. tranne IE.
Ora iniziamo ad aggiungere proprietà relative all'allineamento. per browser della famiglia IE(era per loro che usavamo blocchi aggiuntivi div e span):
Facendo riferimento al tag div all'interno di un blocco di classe allineare il testo... Per fare ciò, è necessario prima specificare il nome della classe, quindi, separato da uno spazio, il tag a cui ci si riferisce.
Textalign div (posizione: assoluta; in alto: 50%;)
Tale costruzione significa: per tutti i tag div all'interno di un blocco con la classe allineare il testo applicare le proprietà elencate.
Di conseguenza, gli stili specificati per il blocco allineare il testo sono modificati:
Allineamento testo (visualizzazione: cella di tabella; allineamento verticale: medio; larghezza: 500 px; altezza: 500 px; posizione: relativa;)
Il punto in alto a sinistra della casella di testo è ora spostato verso il basso del 50%.
Per chiarire cosa sta succedendo, ho disegnato un'illustrazione:
Come potete vedere dall'immagine, abbiamo fatto dei progressi. Ma non è tutto! Il punto in alto a sinistra del riquadro giallo si è infatti spostato del 50% in basso rispetto al riquadro principale (viola). Ma abbiamo bisogno di qualcosa al cinquanta per cento dell'altezza del blocco viola per essere centro del blocco giallo, non il suo punto in alto a sinistra.
Ora verrà utilizzato il tag span e relativo posizionamento:
Textalign span (posizione: relativa; in alto: -50%;)
Pertanto, abbiamo spostato il blocco giallo verso l'alto del 50% della sua altezza, rispetto alla posizione di partenza. Come puoi immaginare, l'altezza del riquadro giallo è uguale all'altezza del contenuto centrato. E l'ultima operazione con il contenitore span ha posizionato il nostro contenuto nel mezzo del blocco viola. Evviva!
Un piccolo sciamano
Prima di tutto, dobbiamo nascondere il prezzemolo da tutti i normali browser e aprirlo per IE. Questo può essere fatto, ovviamente, con l'aiuto di un commento condizionale, non è stato per niente che ne abbiamo fatto conoscenza:
C'è un piccolo problema. Se il contenuto centrato è troppo alto, porta a spiacevoli conseguenze: viene visualizzata un'altezza di scorrimento verticale extra.
Soluzione:è necessario aggiungere proprietà overflow: nascosto bloccare allineare il testo.
Conosci la struttura in dettaglio straripamento può essere dentro.
L'aspetto finale delle istruzioni del blocco CSS allineare il testo sembra:
Allineamento testo (visualizzazione: cella di tabella; allineamento verticale: medio; larghezza: 500 px; altezza: 500 px; posizione: relativa; overflow: nascosto; bordo: 1 px nero pieno;)
Scusa, ho dimenticato di menzionare un punto importante. Se provi imposta l'altezza del blocco di classe allineare il testo in percentuale allora hai non ne verrà fuori niente.
Centratura in blocco ad altezza variabile
Molto spesso è necessario impostare l'altezza di un blocco di classe. allineare il testo non in pixel, ma come percentuale dell'altezza del blocco padre e allinea il contenuto del contenitore div al centro.
Il problema è che è impossibile farlo per una cella di tabella (e dopo tutto, il blocco di classe allineare il testo si trasforma 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 display: tabella e già per impostare il valore percentuale dell'altezza. Quindi il blocco 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:
Classe allineare il testo cambieremo il valore della proprietà Schermo Con cella-tabella sul tavolo e rimuovere la direttiva di allineamento allineamento verticale: medio... Ora possiamo tranquillamente modificare il valore dell'altezza da 500 pixel a, ad esempio, 100%.
Pertanto, le proprietà CSS per il blocco di classe allineare il testo sarà simile a questo:
Textalign (visualizzazione: tabella; larghezza: 500 px; altezza: 100%; posizione: relativa; overflow: nascosto; bordo: 1 px nero pieno;)
Resta da implementare la centratura del contenuto. Per fare ciò, un contenitore div annidato in un blocco di classe allineare il testo(questo è lo stesso blocco giallo nell'immagine), devi impostare la proprietà CSS display: cella-tabella quindi erediterà il 100% dell'altezza dal blocco genitore allineare il testo(blocco viola). E nulla ci impedisce di allineare il contenuto del contenitore div annidato al centro con la proprietà allineamento verticale: medio.
Otteniamo un altro elenco aggiuntivo di proprietà CSS per il div annidato nel contenitore allineare il testo.
Textalign div (display: table-cell; vertical-align: middle;)
Questo è l'intero trucco. Facoltativamente, è possibile variare l'altezza con il contenuto centrato.
Per ulteriori informazioni sull'allineamento verticale di un blocco ad altezza variabile, vedere.
Principali articoli correlati
