Metodi per l'allineamento centrale verticale nei CSS. Tutto sull'allineamento CSS

Frase a destra

Frase che utilizza end

Per creare una linea rossa devi conoscere solo un parametro.

Questa è la semplice proprietà text-indent.

Cos'è il DIV

Il nome dell'elemento deriva dalla parola inglese division, che significa divisione. Quando si scrive markup, viene utilizzato per suddividere gli elementi in blocchi. I DIV racchiudono gruppi di contenuti in una pagina web. Ad esempio, immagini, paragrafi con testo. Il tag non influisce in alcun modo sulla visualizzazione del contenuto e non comporta alcun carico semantico.

DIV supporta tutti gli attributi globali. Ma per il web design ne servono solo due: class e id. Ti ricorderai di tutti gli altri solo in casi esotici, e questo non è un dato di fatto. L'attributo align, precedentemente utilizzato per centrare o allineare a sinistra i div, è stato deprecato.

Quando utilizzare i DIV

Immagina che il sito sia un frigorifero e che i DIV siano contenitori di plastica in cui devi ordinare il contenuto. Non metteresti la frutta nello stesso contenitore con la salsiccia di fegato. Posizionarai ciascun tipo di prodotto separatamente. Il contenuto Web viene generato in modo simile.

Apri qualsiasi sito Web e dividilo in blocchi significativi. Intestazione in alto, piè di pagina in basso, testo principale al centro. A lato si trova solitamente una colonna più piccola con contenuti pubblicitari o una tag cloud.

Ora guarda ogni sezione in modo più dettagliato. Inizia con l'intestazione. L'intestazione del sito ha un logo separato, una navigazione, un'intestazione di primo livello e talvolta uno slogan. Assegna a ciascun blocco semantico il proprio contenitore. Ciò non solo separerà gli elementi nel flusso, ma li renderà anche più facili da formattare. Troverai molto più semplice centrare un oggetto in un tag DIV assegnandogli una classe o un ID.

Centratura dei DIV utilizzando i margini

Durante il rendering degli elementi web, il browser considera tre proprietà: riempimento, margine e bordo. Il riempimento è lo spazio tra il contenuto e il suo bordo. Margine: campi che separano un oggetto da un altro. Il confine sono le linee lungo i blocchi. Possono essere assegnati a tutti contemporaneamente o solo a un lato:

Queste proprietà aggiungono spazio tra gli oggetti e ti aiutano ad allinearli e posizionarli correttamente. Ad esempio, se un blocco con un'immagine deve essere spostato dal bordo sinistro al centro del 20%, assegni un valore di margine sinistro del 20% all'elemento:

Blocca con immagine(margine sinistro: 20%;)

Gli elementi possono anche essere formattati utilizzando i valori di larghezza e il riempimento negativo. Ad esempio, esiste un blocco con dimensioni 200px per 200px. Per prima cosa assegniamogli una posizione assoluta e spostiamolo al centro del 50%.

Div( posizione: assoluta; sinistra: 50%; )

Adesso, per fare in modo che il DIV centrato sia posizionato perfettamente, diamogli un margine negativo a sinistra pari al 50% della sua larghezza, ovvero -100 pixel:

Margine sinistro: -100px;

Nei CSS questo si chiama "rimozione dell'aria". Ma presenta uno svantaggio significativo nella necessità di effettuare calcoli costanti, cosa abbastanza difficile da fare per elementi con diversi livelli di nidificazione. Se vengono specificati i valori di riempimento e larghezza del bordo, il browser calcolerà per impostazione predefinita le dimensioni del contenitore come somma dello spessore dei bordi, del riempimento a destra e a sinistra e del contenuto stesso all'interno, che può arriva anche come una sorpresa.

Pertanto, quando è necessario centrare un DIV, utilizzare la proprietà box-sizing con il valore border-box. Ciò impedirà al browser di aggiungere valori di riempimento e bordo alla larghezza complessiva dell'elemento DIV. Per alzare o abbassare un elemento, utilizzare anche valori negativi. Ma in questo caso possono essere assegnati al campo superiore o inferiore del contenitore.

Come centrare un blocco DIV utilizzando i margini automatici

Questo è un modo semplice per centrare blocchi di grandi dimensioni. Assegni semplicemente la larghezza del contenitore e la proprietà margin ad auto. Il browser posizionerà un blocco al centro con margini uguali a sinistra e a destra, facendo tutto il lavoro da solo. Di conseguenza, non rischi di confonderti nei calcoli matematici e risparmi notevolmente tempo.

Utilizza il metodo del campo automatico durante lo sviluppo di app reattive. La cosa principale è assegnare un valore di larghezza al contenitore in em o percentuale. Il codice dell'esempio sopra centra il DIV e su qualsiasi dispositivo, cellulari compresi, occuperà il 90% dello schermo.

Allineamento tramite proprietà di visualizzazione: blocco in linea

Per impostazione predefinita, gli elementi DIV sono considerati elementi blocco e il loro valore visualizzato è blocco. Per questo metodo sarà necessario sovrascrivere questa proprietà. Adatto solo per DIV con un contenitore principale:

A un elemento con la classe outside-div viene assegnata una proprietà di allineamento del testo con un valore center, che centra il testo all'interno. Ma per ora il browser vede il DIV nidificato come un oggetto blocco. Affinché la proprietà text-align funzioni, il div interno deve essere trattato come minuscolo. Quindi nella tabella CSS per il selettore inner-div scrivi il seguente codice:

Div interno( display: blocco in linea; )

Si modifica la proprietà di visualizzazione da blocco a blocco in linea.

metodo di trasformazione/traduzione

I fogli di stile a cascata consentono di spostare, inclinare, ruotare e trasformare in altro modo gli elementi Web a piacimento. A questo scopo viene utilizzata la proprietà di trasformazione. I valori indicano il tipo e il grado di trasformazione desiderati. In questo esempio lavoreremo con Translate:

La funzione di traduzione sposta un elemento dalla sua posizione corrente a sinistra/destra e su/giù. Due valori vengono passati tra parentesi:

• grado di movimento orizzontale;
• grado di movimento verticale.

Se un elemento deve essere spostato lungo solo uno degli assi delle coordinate, dopo la parola traslare indicare il nome dell'asse e tra parentesi l'entità dello spostamento richiesto:

Trasforma: traduciY(-20%);

In alcuni manuali puoi trovare la trasformazione con i prefissi del fornitore:

Trasformazione Webkit: Translate(50%, 50%); -ms-transform: traduci(50%, 50%); trasformare: tradurre(50%, 50%);

Nel 2018 questo non è più necessario; la proprietà è supportata da tutti i browser, compresi Edge e IE.

Per centrare il DIV che vogliamo, la funzione di traduzione CSS viene scritta con un valore del 50% per l'asse verticale e orizzontale. Ciò farà sì che il browser scosti l'elemento dalla sua posizione corrente della metà della sua larghezza e altezza. Le proprietà larghezza e altezza devono essere specificate:

Tieni presente che l'elemento a cui viene applicata la proprietà di trasformazione si muove indipendentemente dagli oggetti che lo circondano. Da un lato questo è conveniente, ma a volte spostandosi il DIV può sovrapporsi a un altro contenitore. Pertanto, questo metodo di centratura dei componenti web è considerato non standard e viene utilizzato solo in casi di estrema necessità. Per l'animazione vengono utilizzate trasformazioni secondo tutti i canoni CSS.

Lavorare con il layout Flexbox

Flexbox è considerato un modo sofisticato per progettare layout web. Ma se lo padroneggi, ti renderai conto che è molto più semplice e piacevole dei metodi di formattazione standard. La specifica Flexbox è un modo flessibile e incredibilmente potente per gestire gli elementi. Il nome del modulo è tradotto dall'inglese come “contenitore flessibile”. I valori di larghezza, altezza e disposizione degli elementi vengono regolati automaticamente, senza calcolare rientri e margini.

Negli esempi precedenti, abbiamo già lavorato con la proprietà display, ma l'abbiamo impostata su valori di blocco e blocco in linea. Per creare layout flessibili utilizzeremo display: flex. Per prima cosa abbiamo bisogno di un contenitore flessibile:

Per convertirlo in un contenitore flessibile in tabelle a cascata, scriviamo:

Contenitore flessibile( display: flex; )

Tutti gli oggetti nidificati, ma solo i discendenti diretti, saranno elementi flessibili:

Se inserisci un elenco all'interno di un contenitore flessibile, gli elementi dell'elenco li non sono considerati elementi flessibili. Il layout Flexbox funzionerà solo su ul:

Regole per il posizionamento degli elementi flessibili

Per gestire gli elementi flessibili, sono necessari giustifica-contenuto e allinea-elementi. A seconda dei valori specificati, queste due proprietà posizionano automaticamente gli oggetti secondo necessità. Se abbiamo bisogno di centrare tutti i DIV nidificati, scriviamo giustifica-content: center, align-items: center e nient'altro. Il browser farà il resto del lavoro da solo:

Per centrare il testo sui DIV che sono elementi flessibili, puoi utilizzare la tecnica standard di allineamento del testo. Oppure puoi rendere ogni DIV nidificato anche un contenitore flessibile e gestire il contenuto utilizzando aware-content. Questo metodo è molto più razionale se contiene una varietà di contenuti, inclusi grafici, altri oggetti nidificati, inclusi elenchi a più livelli.

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. Come è fatto? Diciamo che abbiamo un contenitore e al suo interno si trova il nostro soggetto sperimentale:

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

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 messo a punto 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; )

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; )

Il risultato sarà simile all'immagine sopra. Tutto funzionerà anche se aggiungi il riempimento. 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; )

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 di cui dovresti essere a conoscenza.

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!