professionisti

• Il contenuto può cambiare dinamicamente l'altezza (l'altezza non è definita nei CSS).
• Il contenuto non viene ritagliato se non è disponibile spazio sufficiente.

contro

• Non funziona in IE 7 o meno
• Molti tag annidati

2° metodo

Questo metodo utilizza il posizionamento assoluto del div, che imposta il suo massimo al 50% e il suo margine superiore meno la metà dell'altezza del contenuto. Ciò implica che l'oggetto deve avere un'altezza fissa, definita negli stili CSS.

Poiché l'altezza è fissa, è possibile impostare l'overflow: auto; per il div che contiene il contenuto, quindi se il contenuto non si adatta, verranno visualizzate le barre di scorrimento.

professionisti

• Funziona in tutti i browser.
• Nessun nidificazione non necessaria.

contro

• Quando lo spazio non è sufficiente, il contenuto scompare (ad esempio, il div è all'interno del corpo e l'utente ha ridotto le finestre, nel qual caso le barre di scorrimento non verranno visualizzate.

3° metodo

In questo metodo, avvolgeremo il div del contenuto con un altro div. Impostiamo la sua altezza al 50% (altezza: 50%;) e il margine inferiore alla metà dell'altezza (margin-bottom: -contentheight;). Il contenuto cancellerà il float e sarà centrato.

professionisti

• Funziona in tutti i browser.
• Quando lo spazio non è sufficiente (ad esempio, quando la finestra viene ridotta) il contenuto non viene ritagliato, verranno visualizzate le barre di scorrimento.

contro

• Penso solo una cosa: che venga utilizzato un elemento vuoto in più.

4° metodo.

Questo metodo utilizza la proprietà position: absolute; per div con dimensioni fisse (larghezza e altezza). Quindi impostiamo le coordinate in alto: 0; in basso: 0; ma poiché ha un'altezza fissa, non può allungarsi ed è centrata. Questo è molto simile al noto metodo di centraggio orizzontale di un elemento di blocco a larghezza fissa (margine: 0 auto;).

professionisti

• Molto semplice.

contro

• Non funziona in Internet Explorer
• Il contenuto verrà ritagliato senza barre di scorrimento se non c'è spazio sufficiente nel contenitore.

5° metodo

Puoi usare questo metodo per allineare al centro una riga di testo. Impostiamo semplicemente l'altezza del testo (line-height) uguale all'altezza dell'elemento (height). Successivamente, la linea verrà visualizzata al centro.

professionisti

• Funziona in tutti i browser.
• Non taglia il testo se non si adatta.

contro

• Funziona solo con il testo (non funziona con gli elementi di blocco).
• Se c'è più di una riga di testo, sembra molto male.

Questa tecnica è molto utile per piccoli oggetti, come centrare il testo in un pulsante o in una casella di testo.

Ora che sai come ottenere l'allineamento verticale al centro, creiamo un semplice sito Web che assomigli a questo alla fine:

Passo 1

È sempre bene iniziare con il markup semantico. La nostra pagina sarà così strutturata:

• #floater (per allineare al centro il contenuto)
• #centrato (elemento centrale)
  • #lato
    • #logo
    • #nav (lista
    • #contenuto
  • #bottom (per i diritti d'autore e altro)

  Scriviamo il seguente markup html:

  Una società

  • Casa
  • Prodotti
  • Blog
  • Contatto
  • Di

  Titolo della pagina

  Riprogettare in modo olistico l'outsourcing a valore aggiunto dopo la collaborazione incentrata sui processi e la condivisione delle idee. Semplifica energicamente i mercati di nicchia di forte impatto tramite imperativi abilitati. Predomina in modo olistico l'innovazione premium dopo scenari avvincenti. Recuperare senza soluzione di continuità standard elevati nel capitale umano con prodotti realizzati all'avanguardia. Distribuisci in modo distintivo gli schemi conformi agli standard prima di robusti vortali. Recaptiualizzare in modo univoco la prontezza per il Web sfruttata rispetto alle informazioni pronte all'uso.

  Intestazione 2

  Abbraccia in modo efficiente la prontezza web personalizzata piuttosto che i processi diretti dal cliente. Far crescere in modo assertivo gli imperativi multipiattaforma rispetto alle tecnologie proattive. Potenzia in modo conveniente meta-servizi multidisciplinari senza interfacce a livello aziendale. Semplifica in modo conveniente le aree tematiche strategiche competitive con mercati elettronici mirati. Sindacato fosforescente comunità di livello mondiale nei confronti dei mercati a valore aggiunto. Reinventare adeguatamente i servizi olistici prima di robusti servizi elettronici.

  L'avviso di copyright va qui

  Passo 2

  Ora scriveremo il CSS più semplice per posizionare gli elementi sulla pagina. Devi salvare questo codice nel tuo file style.css. È a lui che il collegamento è registrato nel file html.

  Html, body (margin: 0; padding: 0; height: 100%;) body (background: url ("page_bg.jpg") 50% 50% no-repeat # FC3; font-family: Georgia, Times, serifs; ) #floater (posizione: relativa; float: sinistra; altezza: 50%; margin-bottom: -200px; larghezza: 1px;) #centered (posizione: relativa; clear: sinistra; altezza: 400px; larghezza: 80%; max -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666;) #bottom (posizione: assoluta; bottom: 0; right: 0;) #nav (position: assoluto; sinistra: 0; alto: 0; basso: 0; destra: 70%; padding: 20px; margine: 10px;) #content (posizione: assoluta; sinistra: 30%; destra: 0; alto: 0; fondo: 0; overflow: auto; altezza: 340 px; padding: 20 px; margine: 10 px;)

  Prima di poter centrare il nostro contenuto, dobbiamo impostare l'altezza del corpo e dell'html al 100%. Poiché l'altezza è calcolata senza margini interni ed esterni (imbottitura e margine), li impostiamo (margini) a 0 in modo che non ci siano barre di scorrimento.

  L'imbottitura inferiore per l'elemento "floater" -a è uguale a meno metà dell'altezza del contenuto (400 px), ovvero -200 px;

  La tua pagina dovrebbe ora assomigliare a questa:

  

  La larghezza dell'elemento #centered è 80%. Questo rende il nostro sito già sui piccoli schermi e più ampio su quelli grandi. la maggior parte dei siti sembra oscena sui nuovi monitor larghi nell'angolo in alto a sinistra. Le proprietà min-width e max-width vincolano anche la nostra pagina in modo che non appaia né troppo larga né troppo stretta. Internet Explorer non supporta queste proprietà. È necessario impostare una larghezza fissa per esso.

  Poiché l'elemento #centered è impostato su position: relative, possiamo utilizzare il posizionamento assoluto degli elementi al suo interno. Quindi impostare l'overflow: auto; per l'elemento #content, in modo che appaiano le barre di scorrimento nel caso in cui il contenuto non si adatti.

  Passaggio 3

  E l'ultima cosa che faremo è aggiungere alcuni stili per rendere la pagina un po' più attraente. Cominciamo dal menù.

  #nav ul (stile elenco: nessuno; padding: 0; margin: 20px 0 0 0; text-indent: 0;) #nav li (padding: 0; margin: 3px;) #nav li a (display: block; background-color: # e8e8e8; padding: 7px; margin: 0; text-decoration: nessuno; color: # 000; border-bottom: 1px solid #bbb; text-align: right;) #nav li a :: after ( content: "" "; color: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px;) #nav li a: hover, #nav li a: focus (background: # f8f8f8; border-bottom-color: # 777;) #nav li a: hover :: after (margin: 0 0 0 7px; color: # f93;) #nav li a: active (padding: 8px 7px 6px 7px;)

  La prima cosa che abbiamo fatto per migliorare l'aspetto del menu è stata rimuovere i marcatori impostando l'attributo list-style su none, e anche impostare padding e padding, poiché sono molto diversi per impostazione predefinita nei diversi browser.

  Nota che abbiamo quindi istruito i collegamenti a essere visualizzati come elementi di blocco. Ora, quando vengono visualizzati, si estendono per l'intera larghezza dell'elemento in cui si trovano.

  Un'altra cosa interessante che abbiamo usato per il menu sono le pseudo-classi: prima e: dopo. Ti permettono di aggiungere qualsiasi cosa prima e dopo un elemento. Questo è un buon modo per aggiungere icone o simboli come una freccia alla fine di ogni collegamento. Questo trucco non funziona in Internet Explorer 7 e versioni precedenti.

  

  Passaggio 4

  Ultimo ma non meno importante, aggiungeremo alcuni colpi di scena al nostro design per una bellezza ancora maggiore.

  #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 (font-family: Helvetica, Arial, sans- serif; font-weight: normal; color: # 666;) h1 (color: # f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0;) #bottom (padding: 10px; font-size: 0.7em; color: # f03;) #logo (font-size: 2em; text-align: center; color: # 999;) #logo strong (spessore font: normale;) #logo span (display: block; font-size: 4em; line-height: 0.7em; color: # 666;) p, h2, h3 (line-height: 1.6em;) a (colore: # f03;)

  In questi stili, impostiamo angoli arrotondati per l'elemento #centered. In CSS3, questa sarà la responsabilità della proprietà border-radius. Questo non è ancora implementato da alcuni browser, a meno che non si utilizzino i prefissi -moz e -webkit per Mozilla Firefox e Safari/Webkit.

  

  Compatibilità

  Come probabilmente avrai intuito, la principale fonte di problemi di compatibilità è Internet Explorer:

  • L'elemento #floater deve essere impostato sulla sua larghezza.
  • IE 6 ha un'imbottitura extra intorno ai menu

  235.882 visualizzazioni

  Centrare gli elementi verticalmente con i 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

  Centrare orizzontalmente è molto semplice e facile. Quando l'elemento centrato è in linea, usa la proprietà parent-align. Quando l'elemento è basato su blocchi, ne impostiamo la larghezza e impostiamo automaticamente i margini sinistro e destro.

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

  Ma l'attributo valign funziona solo sulle celle della tabella. E la proprietà di allineamento verticale è molto simile ad essa. Influisce anche sulle celle della tabella e su alcuni elementi in linea.

  Il valore della proprietà vertical-align agisce rispetto all'elemento inline genitore.

  • In una riga di testo, l'allineamento viene eseguito in relazione all'altezza della riga.
  • L'allineamento viene utilizzato nella cella della tabella in relazione al valore calcolato da un apposito algoritmo (di solito si ottiene l'altezza della riga).

  Sfortunatamente, la proprietà vertical-align non ha effetto sugli elementi a livello di blocco (ad esempio, i paragrafi all'interno di un elemento div). Questa situazione può far pensare che non ci sia soluzione al problema dell'allineamento verticale.

  Ma esistono altri metodi per centrare gli elementi del blocco, la cui scelta dipende da ciò che è 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 nella parte superiore e inferiore del testo. E la linea sarà centrata verticalmente. Spesso l'altezza della linea è resa uguale all'altezza dell'elemento.

  HTML:

  Testo desiderato

  CSS:

  #child (altezza della linea: 200 px;)

  Questo metodo funziona in tutti i browser, sebbene possa essere utilizzato solo per una riga. Il valore di 200 px nell'esempio è scelto arbitrariamente. È possibile utilizzare qualsiasi valore maggiore della dimensione del carattere del testo.

  Centrare un'immagine usando l'altezza della linea

  E se il contenuto fosse un'immagine? Il metodo di cui sopra funzionerà? La risposta sta in un'altra riga di 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

  È stato menzionato sopra che la proprietà di allineamento verticale 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 per centrare verticalmente il contenuto.

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

  HTML:

  Contenuto

  CSS:

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

  Impostiamo l'output tabulare per il div padre e il div nidificato viene emesso come cella di tabella. Ora puoi usare la proprietà di allineamento verticale sul contenitore interno. Tutto in esso sarà centrato verticalmente.

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

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

  Posizionamento assoluto e margini negativi

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

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

  HTML:

  Contenuto

  CSS:

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

  Per prima cosa, impostiamo il tipo di posizionamento degli elementi. Quindi, per il div nidificato, imposta le proprietà in alto e a sinistra su 50%, che è il centro del genitore. Ma l'angolo in alto a sinistra dell'elemento nidificato è centrato. Pertanto, è necessario sollevarlo (metà dell'altezza) e spostarlo a sinistra (metà della larghezza), quindi il centro coinciderà con il centro dell'elemento genitore. Quindi in questo caso è necessaria la conoscenza dell'altezza dell'elemento. Quindi imposta l'elemento su margini negativi superiore e sinistro uguali rispettivamente alla metà dell'altezza e della larghezza.

  Questo metodo non funziona in tutti i browser.

  Posizionamento assoluto e stretching

  Il codice di esempio esegue il centraggio verticale e orizzontale.

  HTML:

  Contenuto

  CSS:

  #parent (posizione: relativa;) #child (posizione: assoluta; superiore: 0; inferiore: 0; sinistra: 0; destra: 0; larghezza: 50%; altezza: 30%; margine: auto;)

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

  L'impostazione di margini di autoformazione su tutti i lati imposterà valori uguali su tutti e 4 i lati e renderà il nostro elemento div nidificato centrato sull'elemento genitore.

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

  Margini superiore e inferiore uguali

  Questo metodo imposta esplicitamente margini uguali sopra e sotto l'elemento padre.

  HTML:

  Contenuto

  CSS:

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

  Il codice CSS di esempio imposta i margini superiore e inferiore per entrambi gli elementi. Per un elemento nidificato, l'impostazione del padding servirà per il centraggio verticale. E il padding dell'elemento genitore centra l'elemento nidificato in esso.

  Le unità relative vengono utilizzate per ridimensionare dinamicamente gli elementi. E per le unità assolute, dovranno essere eseguiti i calcoli.

  Ad esempio, se l'elemento padre è alto 400 px e l'elemento nidificato è 100 px, sono necessari i margini superiore e inferiore di 150 px.

  150 + 150 + 100 = 400

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

  Questo metodo funziona ovunque. Il rovescio della medaglia è la necessità di calcoli.

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

  Diviso galleggiante

  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:

  Contenuto

  CSS:

  #parent (altezza: 250px;) #floater (float: sinistra; altezza: 50%; larghezza: 100%; margin-bottom: -50px;) #child (clear: entrambi; altezza: 100px;)

  Scostiamo il div vuoto a sinistra oa destra e impostiamo la sua altezza al 50% dell'elemento genitore. In questo modo riempirà la metà superiore del genitore.

  Poiché questo div è mobile, viene rimosso dal normale flusso del documento e dobbiamo annullare il ritorno a capo del testo per l'elemento nidificato. L'esempio usa clear: entrambi, ma è sufficiente usare la stessa direzione dell'offset dell'elemento div vuoto mobile.

  Il bordo superiore dell'elemento div nidificato è direttamente sotto il bordo inferiore dell'elemento div vuoto. Dobbiamo spostare l'elemento annidato verso l'alto della metà dell'altezza dell'elemento vuoto flottante. Per risolvere il problema, utilizzare un valore negativo per la 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à è che nessuno di questi è adatto a tutti i casi. È necessario analizzare il progetto e scegliere quello più adatto alle esigenze.

  Penso che molti di voi che hanno fatto il layout si siano imbattuti nella necessità di allineare gli elementi verticalmente e sappiano quali difficoltà sorgono quando si allinea un elemento al centro.

  Sì, per l'allineamento verticale, CSS ha una speciale proprietà di allineamento verticale con più valori. In pratica, tuttavia, non funziona affatto come previsto. Proviamo a capirlo.

  
  Confrontiamo i seguenti approcci. Allineare con:

  • tavoli,
  • trattini,
  • altezza della linea,
  • allungamento,
  • margine negativo,
  • trasformare,
  • pseudo-elemento,
  • scatola flessibile.
  A titolo illustrativo, si consideri il seguente esempio.

  

  Ci sono due div, uno nidificato nell'altro. Diamo loro le classi corrispondenti: esterna e interna.

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

  Innanzitutto, considera il caso in cui le dimensioni delle unità esterna e interna conosciuto... Aggiungiamo display: inline-block all'elemento interno e text-align: center e vertical-align: middle a quello esterno.

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

  Diamo ai blocchi le dimensioni e i colori di sfondo per vedere i loro bordi.

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

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

  Esistono diverse tecniche per risolvere questo problema. Di seguito daremo un'occhiata più da vicino a ciascuno di essi.

  Allinea con una tabella

  La prima soluzione che viene in mente è sostituire il blocco esterno con una tabella a una cella. In questo caso, l'allineamento verrà applicato al contenuto della cella, ovvero al blocco interno.
  
  http://jsfiddle.net/c1bgfffq/1/

  L'ovvio svantaggio di questa soluzione è che, dal punto di vista della semantica, è sbagliato utilizzare le tabelle per l'allineamento. Il secondo inconveniente è che per creare la 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 in CSS.

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

  Allinea con i rientri

  Se le altezze delle scatole interne ed esterne sono note, l'allineamento può essere impostato utilizzando il riempimento verticale della scatola interna utilizzando la formula: (H esterna - H interna) / 2.

  Esterno (altezza: 200 px;) .interno (altezza: 100 px; margine: 50 px 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 con 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 andare a capo nella seconda riga, si consiglia di aggiungere anche lo spazio bianco: nowrap e overflow: regole nascoste.

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

  Puoi anche usare questa tecnica per allineare il testo su più righe ridefinendo il valore dell'altezza della riga per il blocco interno e aggiungendo display: inline-block e vertical-align: regole intermedie.

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

  Lo svantaggio di questo metodo è che l'altezza del blocco esterno deve essere nota.

  Allineamento elastico

  Questo metodo può essere utilizzato quando l'altezza dell'unità esterna è sconosciuta, ma l'altezza dell'unità interna è nota.

  Per questo hai bisogno di:

  1. impostare il posizionamento relativo del blocco esterno e quello interno - assoluto;
  2. aggiungi le regole top: 0 e bottom: 0 al blocco interno, per cui si estende per l'intera altezza del blocco esterno;
  3. impostato su auto per il riempimento verticale del blocco interno.
  .outer (posizione: relativa;) .inner (altezza: 100px; posizione: assoluta; alto: 0; basso: 0; margine: auto 0;)
  http://jsfiddle.net/c1bgfffq/4/

  L'essenza di questa tecnica è che la specifica dell'altezza per un riquadro allungato e posizionato in modo assoluto obbliga il browser a calcolare i margini verticali in proporzioni uguali quando è impostato su auto.

  Allineamento con margine negativo in alto

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

  È necessario impostare il posizionamento relativo del blocco esterno e quello interno - assoluto. Quindi devi spingere la scatola interna verso il basso per metà dell'altezza della parte superiore della scatola esterna: 50% e sollevarla per metà della sua altezza margin-top: -H inner / 2.

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

  Lo svantaggio di questo metodo è che l'altezza dell'unità interna deve essere nota.

  Allineamento con trasformazione

  Questo metodo è simile al precedente, ma può essere applicato quando l'altezza dell'unità interna è sconosciuta. In questo caso, invece di impostare un pixel padding negativo, puoi usare la proprietà transform e spostare il blocco interno verso l'alto usando la funzione translateY e un valore di -50%.

  Outer (posizione: relativa;) .inner (posizione: assoluta; top: 50%; transform: translateY (-50%);)
  http://jsfiddle.net/c1bgfffq/9/

  Perché non è stato possibile impostare una percentuale nel metodo precedente? Poiché i valori percentuali della proprietà margin sono calcolati rispetto al genitore, il 50% sarebbe la metà dell'altezza della scatola esterna e avevamo bisogno di alzare la scatola interna della metà della sua stessa altezza. La proprietà di trasformazione è giusta per questo.

  Lo svantaggio di questo metodo è che non può essere applicato se il blocco interno ha un posizionamento assoluto.

  Allinea con Flexbox

  Il modo più moderno per allineare verticalmente consiste nell'utilizzare il layout della scatola flessibile (comunemente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, posizionandoli quasi come preferisci. L'allineamento centrale per Flexbox è un compito molto semplice.

  La casella esterna deve essere impostata su display: flex e la casella interna deve essere impostata su margin: auto. Ed è tutto! Bello, non è vero?

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

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

  Quale modo scegliere?

  È necessario procedere dall'enunciazione del problema:
  • Per l'allineamento verticale del testo, è meglio utilizzare la spaziatura interna verticale o la proprietà line-height.
  • Per elementi posizionati in modo assoluto con un'altezza nota (come le icone), la proprietà margin-top negativo è l'ideale.
  • Per i casi più complessi, quando l'altezza del blocco è sconosciuta, è necessario utilizzare uno pseudo-elemento o la proprietà di trasformazione.
  • Bene, se sei così fortunato da non aver bisogno di supportare versioni precedenti di IE, allora ovviamente è meglio usare Flexbox.

  Tag: Aggiungi tag

  Se tagli un sito web basato su html, vedrai una certa struttura a strati. Inoltre, nel suo aspetto, sarà simile a una pasta sfoglia. Se la pensi così, molto probabilmente non mangi da molto tempo. Quindi nutri prima la tua fame e poi ti mostreremo come centrare il livello div sul tuo sito:

  Vantaggi dell'etichettatura

  Esistono due tipi principali di costruzione di una struttura del sito:

  • tabulare;
  • Blocco.

  La disposizione dei tavoli è stata dominante sin dagli albori di Internet. I suoi vantaggi includono la precisione di un dato posizionamento. Ma, tuttavia, ha evidenti inconvenienti. I principali sono il volume del codice e la bassa velocità di download.

  Quando si utilizza un 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 costruzione a blocchi del sito permette più volte di ridurre la quantità di codice html. Anche attraverso l'uso di classi CSS.

  Tuttavia, il layout tabulare dovrebbe essere utilizzato per strutturare la visualizzazione dei dati su una pagina. Un classico esempio del suo utilizzo è la visualizzazione delle tabelle.

  Costruzione di blocchi basata sui tag

  chiamato anche strato per strato, e i blocchi stessi sono strati. Questo perché quando si utilizzano determinati valori di proprietà, possono essere impilati uno sopra l'altro, come i livelli in Photoshop.

  Ausili per il posizionamento

  Nel layout a blocchi, il posizionamento dei livelli viene eseguito al meglio utilizzando fogli di stile a cascata. La principale proprietà CSS responsabile del posizionamento

  , è un galleggiante.
  Sintassi della proprietà:
  float: sinistro | a destra | nessuno | ereditare,
  Dove:

  • left - allinea l'elemento a sinistra dello schermo. Il flusso attorno al resto degli elementi avviene a destra;
  • destra - allineamento a destra, flusso attorno ad altri elementi - a sinistra;
  • nessuno - non è consentito avvolgere;
  • inherit - eredita il valore dell'elemento genitore.

  Diamo un'occhiata a un esempio leggero di posizionamento div utilizzando questa proprietà:

  Blocco sinistro

  Blocco destro

  
  

  Ora proviamo ad utilizzare la stessa proprietà per posizionare il terzo div al centro della pagina. Ma sfortunatamente float non ha un valore centrale. E quando imposti un nuovo blocco sul valore di allineamento a destra oa sinistra, viene spostato nella direzione specificata. Pertanto, resta solo da impostare float: lasciato a tutti e tre i blocchi:

  
  

  Ma anche questa non è l'opzione migliore. Quando la finestra viene ridotta, tutti i livelli sono disposti in una riga verticalmente e quando la dimensione viene aumentata, si attaccano al bordo sinistro della finestra. Pertanto, è necessario un modo migliore per centrare l'allineamento del div.

  Strati di centraggio

  Nel prossimo esempio, utilizzeremo un livello contenitore in cui posizioneremo il resto degli elementi. Questo risolve il problema dei blocchi che si spostano l'uno rispetto all'altro quando la finestra viene ridimensionata. Il centraggio del contenitore al centro viene effettuato impostando le proprietà del margine su zero per il margine superiore e auto sui lati (margine: 0 auto):

  Blocco sinistro

  blocco centrale

  Blocco destro

  
  

  Questo stesso esempio mostra come centrare un div orizzontalmente. E se modifichi leggermente il codice sopra, puoi ottenere l'allineamento verticale dei blocchi. Per fare ciò, devi solo modificare la lunghezza del livello del contenitore (ridurla). Cioè, dopo aver modificato il suo css, la classe dovrebbe apparire così:

  Dopo la modifica, tutti i blocchi si allineeranno rigorosamente in fila al centro. E la loro posizione non cambierà in nessuna dimensione della finestra del browser. Ecco come appare il centraggio verticale del div:

  
  

  Nell'esempio seguente, abbiamo utilizzato una serie di nuove proprietà CSS per centrare i livelli all'interno del contenitore:

  
  

  Una breve descrizione delle proprietà css e dei loro valori che abbiamo usato in questo esempio per centrare il div all'interno del div:

  • display: inline-block - Allinea un elemento di blocco a una linea e assicura che sia avvolto attorno a un altro elemento.
  • vertical-align: middle - allinea l'elemento al centro rispetto al genitore;
  • margin-left - imposta il margine a sinistra.

  Come creare un collegamento da un livello

  Sembra strano, ma è possibile. A volte può essere necessario un blocco div come collegamento durante la disposizione di vari tipi di menu. Diamo un'occhiata a un esempio pratico di implementazione di un livello di collegamento:

  Link al nostro sito

  
  

  In questo esempio, utilizzando la riga display: block, impostiamo il collegamento al valore dell'elemento block. E per rendere l'intera altezza del blocco div un collegamento, imposta l'altezza: 100%.

  Nascondere e mostrare elementi di blocco

  Gli elementi di blocco forniscono più opzioni per estendere la funzionalità dell'interfaccia rispetto al layout di tabella obsoleto. Capita spesso che il design di un sito web sia unico e riconoscibile. Ma per una tale esclusiva devi pagare con la mancanza di spazio libero.

  Ciò è particolarmente vero per la home page, che ha il costo più elevato di posizionamento degli annunci. Pertanto, c'è un problema dove "spingere" un altro banner pubblicitario. Allineare il div al centro della pagina non basta!

  Una soluzione più razionale è rendere nascosti alcuni blocchi. Ecco un semplice esempio di tale implementazione:

  Questo è un pulsante magico. Facendo clic su di esso si nasconderà o mostrerà il blocco nascosto.

  
  

  In questo esempio, la posizione dei blocchi div non cambia in alcun modo. Questa è una semplice funzione JavaScript che cambia il valore della proprietà di visualizzazione css dopo aver fatto clic sul pulsante ( evento onclick).

  Sintassi di visualizzazione:
  display: blocco | in linea | blocco in linea | tabella in linea | voce-lista | nessuno | rodaggio | tabella | didascalia della tabella | cella-tabella | gruppo-colonna-tabella | colonna-tavolo | gruppo piè di pagina | gruppo-intestazione-tabella | riga-tabella | gruppo-righe-tabella

  Come puoi vedere, questa proprietà può assumere molti valori. Pertanto è molto utile e può essere utilizzato per posizionare elementi. In uno degli esempi precedenti, utilizzando uno dei suoi valori ( inline-block) abbiamo implementato div di allineamento al centro all'interno di div.

  Abbiamo usato due valori per la proprietà display per nascondere e mostrare il livello.

  L'allineamento orizzontale e verticale degli elementi può essere eseguito in diversi modi. La scelta del metodo dipende dal tipo di elemento (blocco o in linea), dal tipo di posizionamento, dimensioni, ecc.

  1. Allineamento orizzontale al centro del blocco/pagina

  1.1. Se il blocco ha una larghezza:

  div (larghezza: 300 px; margine: 0 auto; / * centra l'elemento orizzontalmente all'interno del blocco genitore * /)

  Se vuoi allineare un elemento in linea in questo modo, deve essere impostato per visualizzare: block;

  1.2. Se il blocco è nidificato in un altro blocco e non è stata impostata/impostata alcuna larghezza per esso:

  .wrapper (text-align: center;)

  1.3. Se il blocco ha una larghezza e deve essere fissato al centro del blocco genitore:

  .wrapper (posizione: relativa; / * imposta il posizionamento relativo per il riquadro genitore, in modo che in seguito possiamo posizionare in modo assoluto il riquadro al suo interno * /) .box (larghezza: 400px; posizione: assoluta; sinistra: 50%; margine- left: -200px; / * sposta il blocco a sinistra di una distanza pari alla metà della sua larghezza * /)

  1.4. Se non viene specificata alcuna larghezza per i blocchi, è possibile centrare utilizzando il blocco wrapper genitore:

  .wrapper (text-align: center; / * posiziona il contenuto del blocco al centro * /) .box (display: inline-block; / * disponi i blocchi in una riga orizzontalmente * / margin-right: -0,25em ; / * rimuove il rientro destro tra i blocchi * /)

  2. Allineamento verticale

  2.1. Se il testo si estende su una riga, ad esempio, per pulsanti e voci di menu:

  .pulsante (altezza: 50 px; altezza linea: 50 px;)

  2.2. Per allineare verticalmente un blocco all'interno di un blocco padre:

  .wrapper (posizione: relativa;) .box (altezza: 100px; posizione: assoluta; alto: 50%; margine: -50px 0 0 0;)

  2.3. Allineamento verticale per tipo di tabella:

  .wrapper (visualizzazione: tabella; larghezza: 100%;) .box (visualizzazione: cella tabella; altezza: 100 px; allineamento testo: centro; allineamento verticale: centro;)

  2.4. Se un blocco ha una larghezza e un'altezza e deve essere centrato sul blocco padre:

  .wrapper (posizione: relativa;) .box (altezza: 100px; larghezza: 100px; posizione: assoluta; in alto: 0; a destra: 0; in basso: 0; a sinistra: 0; margine: auto; overflow: auto; / * a il contenuto non si è insinuato * /)

  2.5. Posizionamento assoluto al centro della pagina/blocco utilizzando la trasformazione CSS3:

  se l'elemento è quotato

  div (larghezza: 300 px; / * imposta la larghezza del blocco * / altezza: 100 px; / * imposta l'altezza del blocco * / transform: translate (-50%, -50%); posizione: assoluta; superiore: 50%; sinistra: 50% ;)

  se l'elemento non è quotato e non è vuoto

  Qualche testo qui

  h1 (margine: 0; transform: translate (-50%, -50%); position: assoluto; top: 50%; left: 50%;)