Allineamento centro DIV

. Anche con l'avvento di HTML5 e l'emergere di concorrenti seri sotto forma di un articolo o di un header, esso continua ad essere inserito ovunque nel markup. Pertanto, ti suggerisco di affrontare il problema della formattazione e allineamento delle div al centro.

Cos'è un div?

Il nome dell'elemento deriva dalla divisione della parola inglese, che significa divisione. Quando si scrive il markup, viene usato per spezzare gli elementi in blocchi. Il div racchiude i gruppi di contenuti in una pagina Web. Ad esempio, immagini, paragrafi con testo. Il tag non influisce sulla visualizzazione del contenuto e non porta alcun carico semantico.

DIV supporta tutti gli attributi globali. Ma per il web design, ne servono solo due: la classe e l'id. Tutto il resto lo ricorderai solo in casi esotici, e questo non è un dato di fatto. L'attributo align, che era precedentemente usato per centrare il div o left, è deprecato.

Quando usare div

Immagina che il sito sia un frigorifero, e DIV sono contenitori di plastica, con i quali devi ordinare i contenuti. Non mettere frutta in un contenitore con salsiccia di fegato. Ogni tipo di prodotto che si inserisce separatamente. Allo stesso modo, il contenuto web viene generato.

Apri qualsiasi sito dividerlo in blocchi significativi. Nella parte superiore del cappuccio, sotto il piè di pagina, al centro del testo principale. Di solito c'è una colonna più piccola sul lato con contenuti pubblicitari o una nuvola di tag.

Ora smonta ogni sezione più in dettaglio. Inizia con un'intestazione. L'intestazione del sito ha un logo separato, navigazione, intestazione di primo livello, a volte uno slogan. Assegna il tuo contenitore a ciascun blocco semantico. Quindi non solo separi gli elementi nello stream, ma rendi anche più semplice formattarli. Sarà molto più facile allineare l'oggetto nel tag DIV al centro assegnandogli una classe o un identificatore.

Allineamento centro DIV utilizzando i margini

Durante l'elaborazione di elementi web, il browser tiene conto di tre proprietà: padding, marging e border. L'imbottitura è lo spazio tra il contenuto e il suo limite. Margine: i campi che separano un oggetto da un altro. Border è una linea lungo i blocchi. Possono essere assegnati immediatamente da tutti o da un solo lato:

 div{border: 1px solid #333;border-left: none;} 

Queste proprietà aggiungono spazio libero tra gli oggetti e li aiutano anche ad allineare e posizionare secondo necessità. Ad esempio, se un blocco con un'immagine deve essere spostato dal bordo sinistro al centro del 20%, si assegna l'elemento margin-left con un valore del 20%:

 .block-with-img{margin-left: 20%;} 

Gli elementi possono anche essere formattati usando le loro larghezze e i loro rientri negativi. Ad esempio, esiste un blocco con dimensioni di 200 px per 200 px. Per prima cosa, assegniamo un posizionamento assoluto e lo spostiamo al centro del 50%.

 div{position: absolute;left: 50%;} 

Ora, in modo che il DIV si trovi idealmente al centro, gli diamo un rientro negativo a sinistra, pari al 50% della sua larghezza, ovvero -100 pixel:

 margin-left: -100px; 

In CSS, questo metodo è chiamato "rimozione dell'aria". Ma ha un notevole svantaggio nella necessità di fare calcoli costanti, cosa abbastanza difficile da fare per elementi con diversi livelli di nidificazione. Se il riempimento e la larghezza del bordo sono impostati, il browser predefinito calcolerà la dimensione del contenitore come la somma dello spessore del bordo, il riempimento a destra, a sinistra e il contenuto stesso all'interno, che può anche essere una sorpresa.

Pertanto, quando è necessario centrare il DIV, utilizzare la proprietà di ridimensionamento della casella con il valore della casella di bordo. Non consentirà al browser di aggiungere rientri e bordi alla larghezza totale dell'elemento DIV. Per aumentare o diminuire un elemento, applica anche valori negativi. Ma puoi assegnarli in questo caso al campo superiore o inferiore del contenitore.

Come allineare il blocco DIV al centro usando i campi automatici

Questo è un modo semplice per centrare grandi blocchi. Assegnare semplicemente la larghezza del contenitore e la proprietà margin a auto. Il browser posizionerà il blocco nel mezzo con gli stessi campi a sinistra e a destra, facendo tutto da solo. Di conseguenza, non rischi di rimanere invischiato in calcoli matematici e di risparmiare significativamente tempo.

 div{width: 90%;margin: 0 auto;} 

Utilizzare il metodo del campo automatico durante lo sviluppo di applicazioni reattive. La cosa principale è assegnare al contenitore un valore di larghezza in em o percent. Il codice dell'esempio precedente centrerà il DIV al centro e su qualsiasi dispositivo, inclusi i telefoni cellulari, occuperà il 90% dello schermo.

Allineamento attraverso il display: proprietà blocco in linea

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

  Qualsiasi testo 

Ad un elemento con la classe div esterna viene assegnata la proprietà text-align con il valore center, che posiziona il testo all'interno al centro. Ma per ora, il browser vede il DIV incorporato come oggetto di blocco. Affinché la proprietà di allineamento del testo funzioni, il div interno deve essere considerato in minuscolo. Pertanto, nella tabella CSS per il selettore inner-div, scrivi il seguente codice:

.inner-div{display: inline-block;} 

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

Trasforma / traduci metodo

I fogli di stile a cascata offrono la possibilità di spostare, falciare, ruotare e trasformare elementi web in ogni modo. Per fare ciò, usa la proprietà transform. I valori indicano il tipo di conversione e il grado desiderati. In questo esempio, lavoreremo con tradurre:

 transform: translate(50%, 50%); 

La funzione translate sposta un elemento dalla sua posizione attuale sinistra / destra e su / giù. Due valori sono indicati tra parentesi:

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

Se un elemento deve essere spostato solo lungo uno degli assi delle coordinate, dopo la parola traduci il nome dell'asse e tra parentesi il valore dell'offset richiesto:

 transform: translateY(-20%); 

In alcuni tutorial è possibile trovare la trasformazione con i prefissi dei fornitori:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

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

Al fine di spostare il DIV di cui abbiamo bisogno al centro, la funzione di traduzione CSS viene scritta con un valore del 50% per l'asse verticale e orizzontale. A causa di ciò, il browser sposta l'elemento dalla sua posizione attuale di metà della larghezza e dell'altezza. Le proprietà width e height devono essere specificate:

  Qui va un po 'di testo 

Tenere presente che l'elemento a cui viene applicata la proprietà di trasformazione si sposta indipendentemente dagli oggetti attorno ad esso. Da un lato, è conveniente, ma a volte in movimento, DIV può bloccare un altro contenitore. Pertanto, questo metodo di centraggio dei componenti Web è considerato non standard e viene utilizzato solo in casi di emergenza. Le trasformazioni su tutti i canoni CSS sono usate per l'animazione.

Lavora con il layout di Flexbox

Flexbox è considerato un modo difficile per disporre i layout web. Ma se lo padroneggi, capirai che è molto più semplice e più piacevole dei metodi di formattazione standard. La specifica Flexbox è un modo flessibile e incredibilmente potente per gestire gli oggetti. Dall'inglese, il nome del modulo è tradotto come "contenitore flessibile". I valori di larghezza, altezza, posizione degli elementi vengono regolati automaticamente, senza calcolare rientri e margini.

Negli esempi precedenti abbiamo già lavorato con la proprietà display, ma gli abbiamo chiesto un blocco (blocco) e un valore stringa (blocco in linea). Per creare layout flessibili, useremo display: flex. Per prima cosa abbiamo bisogno di un contenitore flessibile:

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

 .flex-container{display: flex;} 

Tutti gli oggetti racchiusi in esso, ma solo i discendenti diretti, saranno elementi flessibili:

  Il primo 
  Il secondo 
  terzo 
  Il quarto 

Se si posiziona una lista all'interno del contenitore flessibile, gli elementi della lista li non sono considerati elementi flessibili. Il layout di Flexbox agirà solo su ul:

Regole di posizionamento flessibili

Per gestire gli elementi flessibili, è necessario giustificare il contenuto e allineare gli elementi. A seconda dei valori specificati, queste due proprietà posizionano automaticamente gli oggetti secondo necessità. Se abbiamo bisogno di allineare tutti i DIV annidati al centro, scriviamo il contenuto di giustificazione: centro, elementi allineati: centro e nient'altro. Il browser farà il resto del lavoro stesso:

  Il primo 
  Il secondo 
  terzo 
  Il quarto 

Per allineare il testo al centro di DIV, che sono elementi flessibili, è possibile utilizzare la tecnica standard di allineamento del testo. Oppure puoi rendere ogni div nidificato anche flex-container e gestire i contenuti con contenuti giustificativi. Questo metodo è molto più razionale se l'interno contiene una varietà di contenuti, inclusi grafici, altri oggetti nidificati, inclusi gli elenchi a più livelli.