Intestazione di livello 1, allineata a destra

Cos'è 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 pregiudica in alcun modo la visualizzazione dei contenuti e non porta alcun carico semantico.

DIV supporta tutti gli attributi globali. Ma per il web design, te ne servono solo due: una classe e un ID. Ricorderai tutto il resto solo in casi esotici, e questo non è un dato di fatto. L'attributo align, utilizzato per centrare o allineare a sinistra un div, è deprecato.

Quando utilizzare i DIV

Immagina che il sito sia un frigorifero e che i DIV siano contenitori di plastica in base ai quali è necessario ordinare il contenuto. Non metterai la frutta nello stesso contenitore con il wurstel. Ogni tipo di prodotto che metti separatamente. Il contenuto Web viene generato in modo simile.

Apri qualsiasi sito e dividilo in blocchi semantici. Intestazione in alto, piè di pagina in basso, testo principale al centro. Di lato, di solito c'è una colonna più piccola con contenuti promozionali o una nuvola di tag.

Ora smonta 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 il tuo contenitore a ciascun blocco semantico. Questo non solo separerà gli elementi nel flusso, ma semplificherà anche la loro formattazione. Sarà molto più semplice centrare l'oggetto nel tag DIV assegnandogli una classe o un ID.

Allinea al centro DIV con i margini

Quando si esegue il rendering di elementi Web, il browser considera tre proprietà: riempimento, margini 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 linee lungo i blocchi. Possono essere assegnati contemporaneamente da tutti o solo da un lato:

Queste proprietà aggiungono spazio libero tra gli oggetti e li aiutano anche ad allinearli e posizionarli come desiderato. Ad esempio, se un blocco con un'immagine deve essere spostato dal bordo sinistro al centro del 20%, assegnare un margine sinistro all'elemento con un valore del 20%:

Blocca con img( margine sinistro: 20%; )

Gli elementi possono anche essere formattati utilizzando i loro valori di larghezza e il riempimento negativo. Ad esempio, c'è un blocco con dimensioni di 200px per 200px. Innanzitutto, assegnagli una posizione assoluta e spostalo al centro del 50%.

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

Ora, per assicurarti che il DIV sia perfettamente centrato, assegnagli un padding sinistro negativo pari al 50% della sua larghezza, ovvero -100 pixel:

margine sinistro: -100px

In CSS, questo è chiamato "rimozione dell'aria". Ma ha uno svantaggio significativo nella necessità di eseguire calcoli costanti, cosa abbastanza difficile da fare per elementi con diversi livelli di annidamento. Se sono impostati il ​​riempimento e la larghezza del bordo, il browser calcolerà per impostazione predefinita le dimensioni del contenitore come somma dello spessore del bordo, del riempimento a destra, a sinistra e del contenuto stesso, il che può anche sorprendere.

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

Come centrare il blocco div usando i margini automatici

Questo è un modo semplice per centrare blocchi di grandi dimensioni. Devi semplicemente impostare la larghezza del contenitore e la proprietà margin su auto. Il browser posizionerà il blocco al centro con gli stessi margini a sinistra ea destra, facendo tutto il lavoro da solo. Di conseguenza, non corri il rischio di confonderti nei calcoli matematici e di risparmiare molto tempo.

Usa il metodo del margine automatico durante lo sviluppo di app reattive. La chiave è dare al contenitore un valore di larghezza in ems o percentuali. Il codice sopra ccentrerà il DIV e su qualsiasi dispositivo, compresi i telefoni cellulari, occuperà il 90% dello schermo.

Allineamento tramite la visualizzazione delle proprietà: inline-block

Per impostazione predefinita, gli elementi DIV sono considerati elementi di blocco e hanno un valore visualizzato di blocco. Per questo metodo, dovrai sovrascrivere questa proprietà. Adatto solo per DIV con un contenitore padre:

A un elemento con classe outer-div viene assegnata una proprietà text-align con un valore di centro, 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, inner-div deve essere trattato come inline. Quindi nel CSS per il selettore inner-div, scrivi il seguente codice:

Inner-div( display: inline-block; )

Modificare la proprietà di visualizzazione da block a inline-block.

metodo di trasformazione/traduzione

I fogli di stile a cascata consentono di spostare, inclinare, ruotare e trasformare gli elementi Web a piacimento. Per questo viene utilizzata la proprietà transform. Il tipo di trasformazione e il grado desiderati vengono specificati come valori. In questo esempio, lavoreremo con translate:

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

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

Se l'elemento deve essere spostato solo lungo uno degli assi delle coordinate, dopo la parola di traduzione si specifica il nome dell'asse e, tra parentesi, l'importo dello spostamento richiesto:

Trasforma: traduciY(-20%);

In alcune guide, puoi vedere la trasformazione con i prefissi dei fornitori:

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

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

Per centrare il DIV di cui abbiamo bisogno, la funzione translate CSS viene scritta con un valore del 50% per gli assi verticale e orizzontale. Ciò farà sì che il browser sposti l'elemento dalla sua posizione corrente a metà della sua larghezza e altezza. Le proprietà di larghezza e altezza devono essere specificate:

Tieni presente che l'elemento a cui viene applicata la proprietà di trasformazione si sposta indipendentemente dagli oggetti che lo circondano. Da un lato, questo è conveniente, ma a volte spostandosi, DIV può sovrapporsi a un altro contenitore. Pertanto, questo metodo di centraggio 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 complesso per disporre i layout web. Ma se lo padroneggi, capirai che è molto più semplice e divertente dei metodi di formattazione standard. La specifica Flexbox è un modo flessibile e incredibilmente potente per gestire gli elementi. 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 l'abbiamo impostata su un valore block (block) e inline (inline-block). Per creare layout flessibili, utilizzeremo display: flex. Per prima cosa abbiamo bisogno di un contenitore flessibile:

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

Flex-container( display: flex; )

Tutti gli oggetti nidificati al suo interno, ma solo i figli diretti, saranno elementi flessibili:

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

Regole per il posizionamento di articoli 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 centrare tutti i DIV annidati, scriviamo justify-content: center, align-items: center e nient'altro. Il browser farà il resto del lavoro:

Per centrare il testo su DIV che sono elementi flessibili, puoi utilizzare il trucco standard di allineamento del testo. Oppure puoi anche rendere ogni DIV annidato un contenitore flessibile e gestire il contenuto con justify-content . Questo metodo è molto più razionale se contiene una varietà di contenuti, inclusi grafici, altri oggetti nidificati, inclusi elenchi multilivello.

Centrare gli elementi verticalmente con CSS è una sfida per gli sviluppatori. Tuttavia, ci sono diversi metodi per risolverlo, che sono abbastanza semplici. Questa lezione presenta 6 opzioni per centrare verticalmente il contenuto.

Iniziamo con una descrizione generale del problema.

Problema di centraggio verticale

La centratura orizzontale è molto semplice e facile. Quando l'elemento centrato è in linea, utilizzare la proprietà di allineamento relativa all'elemento padre. Quando l'elemento è bloccato, imposta la sua larghezza e imposta automaticamente i margini sinistro e destro.

La maggior parte delle persone, quando usa la proprietà text-align:, fa riferimento alla proprietà vertical-align per il centraggio verticale. Tutto sembra abbastanza logico. Se hai utilizzato modelli di tabella, probabilmente hai utilizzato ampiamente l'attributo valign, il che rafforza la convinzione che vertical-align sia la strada giusta da percorrere.

Ma l'attributo valign funziona solo sulle celle della tabella. E la proprietà vertical-align è molto simile. Influisce anche sulle celle della tabella e su alcuni elementi inline.

Il valore della proprietà vertical-align è relativo all'elemento inline padre.

• In una riga di testo, l'allineamento è relativo all'altezza della riga.
• La cella della tabella utilizza l'allineamento rispetto al valore calcolato da un apposito algoritmo (di solito si ottiene l'altezza della linea).

Ma sfortunatamente, la proprietà vertical-align non funziona su elementi a livello di blocco (come i paragrafi all'interno di un elemento div). Questa situazione può portare all'idea che non ci sia soluzione al problema dell'allineamento verticale.

Ma ci sono altri metodi per centrare gli elementi a livello di blocco, la cui scelta dipende da cosa viene centrato rispetto al contenitore esterno.

metodo dell'altezza della linea

Questo metodo funziona quando vuoi centrare verticalmente una riga di testo. Tutto quello che devi fare è impostare l'altezza della linea in modo che sia maggiore della dimensione del carattere.

Per impostazione predefinita, lo spazio libero verrà distribuito uniformemente sopra e sotto il testo. E la linea sarà centrata verticalmente. Spesso l'altezza della linea è uguale all'altezza dell'elemento.

HTML:

CSS:

#figlio ( altezza della linea: 200px; )

Questo metodo funziona in tutti i browser, sebbene possa essere utilizzato solo per una singola riga. Il valore di 200 px nell'esempio viene scelto arbitrariamente. Puoi utilizzare qualsiasi valore più grande della dimensione del carattere del testo.

Centrare un'immagine con l'altezza della linea

E se il contenuto fosse un'immagine? Il metodo di cui sopra funzionerà? La risposta si trova in un'altra riga di codice CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Il valore della proprietà line-height deve essere maggiore dell'altezza dell'immagine.

Metodo delle tabelle CSS

Come accennato in precedenza, la proprietà vertical-align si applica alle celle della tabella, dove funziona alla grande. Possiamo rendere il nostro elemento come una cella di tabella e utilizzare la proprietà vertical-align su di esso per centrare il contenuto verticalmente.

Nota: Una tabella CSS non è la stessa di una tabella HTML.

HTML:

CSS:

#parent (visualizza: tabella;) #child (visualizza: table-cell; vertical-align: middle; )

Impostiamo l'output della tabella sul div padre e rendiamo il div nidificato come una cella della tabella. Ora puoi usare la proprietà vertical-align sul contenitore interno. Tutto in esso sarà centrato verticalmente.

A differenza del metodo sopra, in questo caso il contenuto può essere dinamico, poiché l'elemento div si ridimensionerà per adattarsi al suo contenuto.

Lo svantaggio di questo metodo è che non funziona nelle versioni precedenti di IE. Devi usare la proprietà display: inline-block per il contenitore nidificato.

Posizionamento assoluto e margini negativi

Questo metodo funziona anche in tutti i browser. Ma richiede che all'elemento centrato venga assegnata un'altezza.

Il codice di esempio esegue contemporaneamente il centraggio orizzontale e verticale:

HTML:

CSS:

#parent (posizione: relativa;) #figlio ( posizione: assoluta; in alto: 50%; sinistra: 50%; altezza: 30%; larghezza: 50%; margine: -15% 0 0 -25%; )

Innanzitutto, impostiamo il tipo di posizionamento degli elementi. Quindi, sul div nidificato, imposta le proprietà in alto e a sinistra su 50%, che è il centro dell'elemento padre. Ma l'angolo in alto a sinistra dell'elemento nidificato viene centrato. Pertanto, è necessario sollevarlo (metà altezza) e spostarlo a sinistra (metà larghezza), quindi il centro coinciderà con il centro dell'elemento genitore. Quindi in questo caso è necessario conoscere l'altezza dell'elemento. Quindi diamo all'elemento margini superiore e sinistro negativi pari rispettivamente alla metà dell'altezza e della larghezza.

Questo metodo non funziona in tutti i browser.

Posizionamento e allungamento assoluti

Il codice di esempio esegue la centratura verticale e orizzontale.

HTML:

CSS:

#parent (posizione: relativa;) #figlio ( posizione: assoluta; in alto: 0; in basso: 0; a sinistra: 0; a destra: 0; larghezza: 50%; altezza: 30%; margine: auto; )

L'idea alla base di questo metodo è di estendere l'elemento nidificato a tutti e 4 i bordi dell'elemento genitore impostando le proprietà superiore, inferiore, destra e sinistra su 0.

L'impostazione dei margini su tutti i lati su auto imposterà i valori su tutti e 4 i lati in modo che siano uguali e porterà il nostro elemento div nidificato al centro dell'elemento genitore.

Sfortunatamente, questo metodo non funziona in IE7 e versioni precedenti.

Uguale imbottitura superiore e inferiore

Questo metodo imposta in modo esplicito un riempimento uguale sopra e sotto l'elemento padre.

HTML:

CSS:

#genitore ( riempimento: 5% 0; ) #figlio ( riempimento: 10% 0; )

Nel codice CSS per l'esempio, il riempimento superiore e inferiore è impostato per entrambi gli elementi. Per un elemento nidificato, l'impostazione del riempimento servirà a centrarlo verticalmente. E il riempimento dell'elemento genitore centra l'elemento nidificato al suo interno.

Le unità relative vengono utilizzate per ridimensionare dinamicamente gli elementi. E per le unità di misura assolute, dovrai fare i calcoli.

Ad esempio, se l'elemento padre è alto 400 px e l'elemento nidificato è alto 100 px, sono necessari 150 px di riempimento in alto e in basso.

150 + 150 + 100 = 400

L'utilizzo di % consente di lasciare i calcoli al browser.

Questo metodo funziona ovunque. Lo svantaggio è la necessità di calcoli.

Nota: Questo metodo funziona impostando il margine dell'elemento. Puoi anche usare i margini all'interno di un elemento. La decisione di applicare margini o padding dovrebbe essere presa in base alle specifiche del progetto.

div fluttuante

Questo metodo utilizza un elemento div vuoto, che fluttua e aiuta a controllare la posizione del nostro elemento annidato nel documento. Nota che il div mobile è posizionato prima del nostro elemento annidato nel codice HTML.

HTML:

CSS:

#parent (height: 250px;) #floater ( float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child ( clear: both; height: 100px; )

Sfalsiamo il div vuoto a sinistra oa destra e gli diamo un'altezza del 50% dell'elemento genitore. In questo modo riempirà la metà superiore dell'elemento genitore.

Poiché questo div è mobile, viene rimosso dal normale flusso del documento e dobbiamo svolgere l'elemento nidificato. L'esempio utilizza clear: both , ma è sufficiente utilizzare la stessa direzione dell'offset dell'elemento div vuoto mobile.

Il bordo superiore dell'elemento div nidificato si trova direttamente sotto il bordo inferiore dell'elemento div vuoto. Abbiamo bisogno di spostare l'elemento annidato verso l'alto della metà dell'altezza dell'elemento vuoto mobile. Per risolvere il problema, viene utilizzato un valore negativo della proprietà margin-bottom per un elemento div vuoto mobile.

Questo metodo funziona anche in tutti i browser. Tuttavia, il suo utilizzo richiede un elemento div vuoto aggiuntivo e la conoscenza dell'altezza dell'elemento nidificato.

Conclusione

Tutti i metodi descritti sono facili da usare. La difficoltà sta nel fatto che nessuno di essi è adatto a tutti i casi. È necessario analizzare il progetto e scegliere quello più adatto alle esigenze.

Se tagli un sito creato sulla base di html , vedrai una certa struttura a strati. Inoltre, con il suo aspetto, sarà simile a una torta a strati. Se la pensi così, molto probabilmente non mangi da molto tempo. Quindi prima soddisfa la tua fame e poi ti mostreremo come centrare il livello div sul tuo sito:

Vantaggi del layout utilizzando un tag

Esistono due tipi principali di costruzione della struttura del sito:

• tabulare;
• Bloccare.

Il layout tabulare è stato dominante sin dagli albori di Internet. I suoi vantaggi includono la precisione del posizionamento dato. Ma, tuttavia, presenta evidenti carenze. I principali sono la maggior parte del codice e la bassa velocità di download.

Quando si utilizza il layout tabulare, la pagina Web non verrà visualizzata finché non sarà completamente caricata. Mentre quando si utilizzano blocchi div, gli elementi vengono visualizzati immediatamente.

Oltre all'elevata velocità di caricamento, la creazione di blocchi del sito consente di ridurre più volte la quantità di codice html. Anche attraverso l'uso di classi CSS.

Tuttavia, il layout tabellare dovrebbe essere utilizzato per strutturare la visualizzazione dei dati sulla pagina. Un classico esempio del suo utilizzo è l'esposizione di tavoli.

Costruzione di blocchi in base ai tag