modo per visualizzare come tabella, dopodiché possiamo usare la proprietà vertical-align su di essa (che funziona in modo diverso su elementi diversi).

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

professionisti

• Il contenuto può cambiare l'altezza in modo dinamico (l'altezza non è definita in CSS).
• Il contenuto non viene troncato se non c'è abbastanza spazio per esso.

Svantaggi

• Non funziona in IE 7 e versioni precedenti
• Molti tag annidati

2° metodo

Questo metodo utilizza il posizionamento assoluto del div , che ha la parte superiore impostata al 50% e il margine superiore (margin-top) 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, puoi impostare overflow:auto; per il div contenente il contenuto, quindi se il contenuto non si adatta, verranno visualizzate le barre di scorrimento.

#content ( posizione: assoluta; in alto: 50%; altezza: 240px; margine in alto: -120px; /* meno la metà dell'altezza */ )

professionisti

• Funziona con tutti i browser.
• Nessun investimento aggiuntivo.

Svantaggi

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

3° metodo

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

#floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: both; height: 240px; position: relativo; )

professionisti

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

Svantaggi

• Ne penso solo uno: 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 sue coordinate top:0; in basso:0; , ma poiché ha un'altezza fissa, non può allungarsi ed è centrato. Questo è molto simile al metodo ben noto di centrare orizzontalmente un elemento a livello di blocco di larghezza fissa (margine: 0 auto;).

#content( posizione: assoluta; alto: 0; basso: 0; sinistra: 0; destra: 0; margine: automatico; altezza: 240px; larghezza: 70%; )

professionisti

• Molto semplice.

Svantaggi

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

5° metodo

È possibile utilizzare questo metodo per centrare una singola riga di testo. Basta impostare l'altezza del testo (altezza della linea) sull'altezza dell'elemento (altezza). Successivamente, la linea verrà visualizzata al centro.

#content( height: 100px; line-height: 100px; )

professionisti

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

Svantaggi

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

Questo metodo è molto utile per piccoli elementi, come centrare il testo in un pulsante o in un campo di testo.

Ora che sai come ottenere l'allineamento verticale al centro, creiamo un semplice sito Web che finisce per assomigliare a questo:

Passo 1

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

• #floater (per centrare il contenuto)
• #centrato (elemento centrale)
  • #lato
    • #logo
    • #nav (elenco
    • #contenuto
  • #bottom (per i diritti d'autore e tutto)

  Scriviamo il seguente markup html:

  Un'azienda

  • Casa
  • Prodotti
  • Blog
  • contatto
  • Di

  Titolo della pagina

  Riprogettare olisticamente l'outsourcing a valore aggiunto dopo la collaborazione incentrata sui processi e la condivisione di idee. Semplifica energicamente i mercati di nicchia di grande impatto tramite imperativi abilitati. Predomina in modo olistico l'innovazione premium dopo scenari avvincenti. Riassumi senza problemi standard elevati nel capitale umano con prodotti manifatturieri all'avanguardia. Distintivamente sindacato schemi conformi agli standard prima di robusti vortali. Ricapitola in modo univoco la disponibilità al Web sfruttata rispetto alle informazioni pronte all'uso.

  Titolo 2

  Abbraccia in modo efficiente la prontezza web personalizzata piuttosto che i processi diretti dal cliente. Crescere in modo assertivo gli imperativi multipiattaforma rispetto alle tecnologie proattive. Potenzia comodamente metaservizi multidisciplinari senza interfacce a livello aziendale. Semplifica comodamente le aree tematiche strategiche competitive con e-market mirati. Sindacati in modo fosforescente di comunità di prim'ordine nei confronti dei mercati a valore aggiunto. Reinventare opportunamente servizi olistici prima di robusti servizi elettronici.

  L'avviso sul copyright va qui

  Passo 2

  Ora scriveremo il CSS più semplice per posizionare gli elementi nella pagina. Dovresti salvare questo codice nel file style.css. È su di esso che il collegamento è scritto 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%; margine inferiore: -200px; larghezza: 1px; ) #centrato ( posizione: relativo; chiaro: sinistra; altezza: 400px; larghezza: 80%; max -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom ( posizione: assoluta; fondo: 0; destra: 0; ) #nav ( posizione: assoluto; a sinistra: 0; in alto: 0; in basso: 0; a destra: 70%; riempimento: 20px; margine: 10px; ) #content ( posizione: assoluto; a sinistra: 30%; a destra: 0; in alto: 0; in basso: 0; overflow: auto; altezza: 340px; riempimento: 20px; margine: 10px; )

  Prima di poter allineare il nostro contenuto al centro, dobbiamo impostare l'altezza del corpo e dell'html al 100%. Poiché l'altezza è considerata senza padding interno ed esterno (padding e margine), li impostiamo (padding) su 0 in modo che non ci siano barre di scorrimento.

  Il riempimento inferiore per l'elemento "floater" è meno la metà dell'altezza del contenuto (400px), ovvero -200px ;

  La tua pagina ora dovrebbe assomigliare a questa:

  

  La larghezza dell'elemento #centrato è 80%. Questo rende il nostro sito più stretto su schermi piccoli e più largo su quelli più grandi. la maggior parte dei siti sembra brutta sui nuovi monitor wide nell'angolo in alto a sinistra. Anche le proprietà min-width e max-width vincolano la nostra pagina in modo che non sembri troppo ampia o troppo stretta. Internet Explorer non supporta queste proprietà. Deve essere impostato su una larghezza fissa.

  Poiché l'elemento #centered è impostato su position:relative , possiamo utilizzare il posizionamento assoluto degli elementi al suo interno. Quindi imposta overflow:auto; per l'elemento #content in modo che le barre di scorrimento appaiano se non ci sono contenuti da adattare.

  Passaggio 3

  E l'ultima cosa che faremo è aggiungere uno stile per rendere la pagina un po' più attraente. Cominciamo con il menu.

  #nav ul ( stile elenco: nessuno; riempimento: 0; margine: 20px 0 0 0; rientro testo: 0; ) #nav li ( riempimento: 0; margine: 3px; ) #nav li a ( display: blocco; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: nessuno; colore: #000; border-bottom: 1px solido #bbb; text-align: right; ) #nav li a::after ( content: """; color: #aaa; font-weight: grassetto; 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 punti elenco impostando l'attributo list-style:none e anche impostare il padding e il padding, poiché le impostazioni predefinite variano notevolmente tra i browser.

  Si noti che abbiamo quindi specificato che i collegamenti devono essere visualizzati come elementi a livello di blocco. Ora, quando vengono visualizzati, sono allungati per l'intera larghezza dell'elemento in cui si trovano.

  Un'altra cosa interessante che abbiamo usato per i menu sono le pseudo-classi :before e :after. Ti permettono di aggiungere qualcosa 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

  E, ultimo ma non meno importante, aggiungeremo dei veli 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 ( famiglia di caratteri: Helvetica, Arial, sans- serif; peso carattere: normale; colore: #666; ) h1 ( colore: #f93; bordo inferiore: 1px solido #ddd; spaziatura lettera: -0.05em; peso carattere: grassetto; margine superiore: 0; padding-top: 0; ) #bottom ( padding: 10px; dimensione carattere: 0.7em; colore: #f03; ) #logo (dimensione carattere: 2em; allineamento testo: centro; colore: #999; ) #logo strong (font-weight: normal; ) #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 gli angoli arrotondati per l'elemento #centrato. In CSS3, questo sarà gestito dalla proprietà border-radius. Questo non è ancora implementato da alcuni browser, ad eccezione dell'uso dei prefissi -moz e -webkit per Mozilla Firefox e Safari/Webkit.

  

  Compatibilità

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

  • L'elemento #floater deve essere impostato su una larghezza
  • Riempimento extra intorno ai menu in IE 6

  237152 visualizzazioni

  Buona giornata, abbonati e lettori di questa pubblicazione. Oggi voglio entrare nei dettagli e dirti come centrare il testo in css. In alcuni articoli precedenti, ho toccato indirettamente questo argomento, quindi hai una certa conoscenza in quest'area.

  Tuttavia, in questo post, ti parlerò di tutti i modi per allineare gli oggetti, oltre a spiegare come rientrare e redline i paragrafi. Quindi iniziamo a imparare!

  HTML e la sua progenie e allineare

  Questo metodo non viene quasi mai utilizzato, poiché è stato soppiantato dagli strumenti dei fogli di stile a cascata. Tuttavia, sapere che esiste un tale tag non ti farà male.

  Per quanto riguarda la validazione (questo termine è descritto in dettaglio nell'articolo ""), la specifica html stessa ne condanna l'uso < centro>, poiché per la validità è necessario utilizzare un transitivo TIPO DOCUMENTO>.

  Questo tiposalta gli elementi proibiti.

  Passiamo ora all'attributo allineare. Imposta l'allineamento orizzontale degli oggetti e si adatta dopo la dichiarazione del tag. Di solito può essere utilizzato per allineare il contenuto a sinistra ( sinistra), dal lato giusto ( Giusto), centrato ( centro) e larghezza del testo ( giustificare).

  Di seguito darò un esempio in cui metterò l'immagine e il paragrafo al centro.

  Questo contenuto sarà centrato.

  Si noti che per l'immagine, l'attributo che stiamo analizzando ha valori leggermente diversi.

  Nell'esempio che ho usato allineare="mezzo". Grazie a ciò, l'immagine viene allineata in modo che la frase si trovi esattamente al centro dell'immagine.

  Strumenti di centraggio CSS

  Le proprietà CSS progettate per allineare blocchi, testo e contenuto grafico vengono utilizzate molto più spesso. Ciò è dovuto principalmente alla comodità e flessibilità di implementazione degli stili.

  Quindi, iniziamo con la prima proprietà della centratura del testo: questa è testo-allineare.

  Funziona allo stesso modo di align in . Tra le parole chiave, puoi sceglierne una dall'elenco generale o ereditare le caratteristiche dell'antenato ( ereditare).

  Voglio notare che in css3 puoi impostare altri 2 parametri: cominciare– a seconda delle regole di scrittura del testo (da destra a sinistra o viceversa), imposta l'allineamento a sinistra o a destra (simile al lavoro di sinistra o di destra) e fine- opposto per iniziare (quando si scrive il testo da sinistra a destra, si comporta come a destra, quando si scrive da destra a sinistra - sinistra).

  Offerta a destra

  Frase che usa fine

  Lascia che ti parli di un piccolo trucco. Quando si sceglie un valore giustificare l'ultima riga può pendere brutta dal basso. Per posizionarlo, ad esempio, al centro, è possibile utilizzare l'immobile testo-allineamento-ultimo.

  Per allineare verticalmente il contenuto del sito o le celle della tabella, utilizzare la proprietà allineamento verticale. Di seguito ho descritto le parole chiave principali dell'elemento.

  Parola chiave	scopo
  linea di base	Specifica l'allineamento rispetto alla linea antenata, chiamata linea di base. Se l'oggetto antenato non ha tale linea, l'allineamento avviene lungo il bordo inferiore.
  mezzo	Il centro dell'oggetto mutabile è allineato alla linea di base, a cui viene aggiunto l'altezza del pavimento dell'elemento padre.
  parte inferiore	La parte inferiore del contenuto selezionato si adatta alla parte inferiore dell'oggetto sottostante.
  superiore	Simile alla parte inferiore, solo con la parte superiore dell'oggetto.
  super	Crea un apice di carattere.
  sub	Rende l'elemento pedice.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  C IN e TDIA

  C IN e TDIA

  Rientro

  E infine, siamo arrivati ​​al rientro nel paragrafo. Il linguaggio CSS usa una proprietà speciale chiamata indentatura del testo.

  Con esso, puoi creare sia una linea rossa che una sporgenza (è necessario specificare un valore negativo).

  Per creare una linea rossa, devi conoscere un solo parametro.

  È una semplice proprietà di rientro del testo.

  Molto spesso nel layout è necessario centrare qualche elemento orizzontalmente e/o verticalmente. Pertanto, ho deciso di realizzare un articolo con vari metodi di centraggio, in modo che tutto sia a portata di mano in un unico posto.

  Allineamento orizzontale

  margine: automatico

  L'allineamento orizzontale con margine viene utilizzato quando è nota la larghezza dell'elemento centrato. Funziona per elementi di blocco:

  Elem ( margine-sinistra: auto; margine-destra: auto; larghezza: 50%; )

  Specificare il valore automatico del riempimento destro e sinistro li rende uguali, il che centra l'elemento orizzontalmente all'interno del blocco padre.

  text-align: centro

  Questo metodo è adatto per centrare il testo all'interno di un blocco. allineamento testo: centro:

  Sono allineato al centro

  posizione e margine negativo a sinistra

  Adatto per blocchi centrati di larghezza nota. Impostiamo il blocco padre su position: relativo alla posizione relativa ad esso, l'elemento centrato su position: absolute , left: 50% e un margin-left negativo, il cui valore è uguale alla metà della larghezza dell'elemento:

  Sono allineato al centro

  display: blocco in linea + allineamento testo: centro

  Il metodo è adatto per allineare blocchi di larghezza sconosciuta, ma richiede un wrapper padre. Ad esempio, ecco come centrare un menu orizzontale:

  • casa
  • Circa l'autore

  Allineamento verticale

  altezza della linea

  Per allineare una singola riga di testo, puoi utilizzare gli stessi valori di altezza e interlinea per il blocco padre. Adatto per pulsanti, voci di menu, ecc.

  Sono allineato verticalmente

  posizione e margine negativo in aumento

  Un elemento può essere allineato verticalmente dandogli un'altezza fissa e applicando la posizione: assoluto e un margine negativo fino alla metà dell'altezza dell'elemento da allineare. Al blocco padre dovrebbe essere assegnata la posizione: relativa:

  Wrapper ( posizione: relativa; ) elem ( altezza: 200px; margine: -100px 0 0; posizione: assoluta; in alto: 50%; )

  Pertanto, utilizzando il posizionamento e i margini negativi, puoi centrare l'elemento sulla pagina.

  display: tabella-cella

  Per l'allineamento verticale, all'elemento viene applicata la proprietà display: table-cell, che lo fa emulare una cella di tabella. Impostiamo anche l'altezza e l'allineamento verticale: al centro. Avvolgeremo tutto questo in un contenitore con la proprietà dislpay: table; :

  Sono allineato verticalmente

  Allinea dinamicamente un elemento su una pagina

  Abbiamo esaminato i modi per allineare gli elementi su una pagina utilizzando i CSS. Ora diamo un'occhiata all'implementazione di jQuery.

  Aggiungiamo jQuery alla pagina:

  Suggerisco di scrivere una semplice funzione per centrare un elemento sulla pagina, chiamiamola alignCenter() . L'elemento stesso funge da argomento per la funzione:

  Funzione alignCenter(elem) ( // codice qui )

  Nel corpo della funzione, calcola e assegna dinamicamente le coordinate del centro pagina alle proprietà CSS in alto a sinistra:

  Funzione alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // non dimenticare di aggiungere position: absolute all'elemento per attivare le coordinate )) )

  Nella prima riga della funzione, otteniamo la larghezza del documento e sottraiamo da esso la larghezza dell'elemento, divisa a metà: questo sarà il centro orizzontale della pagina. La seconda linea fa lo stesso, solo con un'altezza da allineare verticalmente.

  La funzione è pronta, resta da appendere agli eventi di prontezza DOM e ridimensionamento della finestra:

  $(function() ( // chiama la funzione di centraggio quando il DOM è pronto alignCenter($(elem)); // chiama la funzione quando la finestra viene ridimensionata $(window).resize(function() ( alignCenter($( elem)); )) // funzione di centraggio elemento funzione alignCenter(elem) ( elem.css(( // calcola le coordinate sinistra e in alto a sinistra: ($(window).width() - elem.width()) / 2 + "px", in alto: ($(finestra).height() - elem.height()) / 2 + "px" ))) ) ))

  Applicazione di Flexbox

  Nuove funzionalità CSS3 come Flexbox stanno gradualmente diventando mainstream. La tecnologia aiuta a creare markup senza l'uso di float, posizionamento, ecc. Può essere utilizzato anche per centrare gli elementi. Ad esempio, applichiamo Flexbox all'elemento padre .wrapper e centramo il contenuto all'interno:

  Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; altezza: 500px; larghezza: 500px; ) .wrapper .content ( margine: auto; /* margine: 0 auto; solo orizzontale */ /* margine: auto 0; solo verticale */ )

  Lorem ipsum dolor sit amet

  Questa regola centra l'elemento orizzontalmente e verticalmente allo stesso tempo: il margine ora funziona non solo per l'allineamento orizzontale, ma anche per l'allineamento verticale. E senza larghezza/altezza nota.

  Risorse correlate

  Aiuta il progetto

  Quando si impagina una pagina, è spesso necessario eseguire l'allineamento al centro in modo CSS: ad esempio, centrare il blocco principale. Esistono diverse opzioni per risolvere questo problema, ognuna delle quali prima o poi deve essere utilizzata da qualsiasi progettista di layout.

  Allineamento del testo al centro

  Spesso, per scopi decorativi, si desidera impostare l'allineamento del testo al centro, CSS in questo caso consente di ridurre i tempi di impaginazione. In precedenza, ciò avveniva utilizzando gli attributi HTML, ma ora lo standard richiede che il testo sia allineato utilizzando i fogli di stile. A differenza dei blocchi, che devono cambiare i margini, nei CSS l'allineamento del testo è centrato su una singola riga:

  • allineamento testo:centro;

  Questa proprietà viene ereditata e passata dal genitore a tutti i figli. Influisce non solo sul testo, ma anche su altri elementi. Per fare ciò, devono essere inline (ad esempio, span) o inline-block (tutti i blocchi che hanno la proprietà display: block impostata). Quest'ultima opzione consente anche di modificare la larghezza e l'altezza dell'elemento, regolando in modo più flessibile i rientri.

  Spesso nelle pagine, align è attribuito al tag stesso. Questo rende immediatamente il codice non valido, poiché il W3C ha deprecato l'attributo align. Non è consigliabile utilizzarlo su una pagina.

  Allineare un blocco al centro

  Se hai bisogno di centrare un div, CSS ha un modo abbastanza comodo: usare i margini. I rientri possono essere impostati sia per gli elementi di blocco che per gli elementi di blocco in linea. Il valore della proprietà deve assumere i valori 0 (rientri verticali) e auto (rientri orizzontali automatici):

  • margine:0 automatico;

  Ora questa opzione è riconosciuta come assolutamente valida. L'utilizzo dei margini consente inoltre di impostare l'allineamento dell'immagine al centro: consente di risolvere molti problemi legati al posizionamento di un elemento su una pagina.

  

  Allinea il blocco a sinistra o a destra

  A volte non è necessario centrare in modo CSS, ma è necessario affiancare due blocchi: uno sul bordo sinistro, l'altro a destra. Per fare ciò, esiste una proprietà float, che può assumere uno dei tre valori: sinistra, destra o nessuno. Diciamo che hai due blocchi che devono essere affiancati. Allora il codice sarà questo:

  • .sinistra (flottante:sinistra;)
  • .destra(flottante:destra)

  Se è presente anche un terzo blocco, che dovrebbe trovarsi sotto i primi due blocchi (ad esempio un piè di pagina), è necessario impostare la proprietà clear:

  • .sinistra (flottante:sinistra;)
  • .destra(flottante:destra)
  • piè di pagina (chiaro: entrambi)

  Il fatto è che i blocchi con classi sinistra e destra cadono fuori dal flusso generale, cioè tutti gli altri elementi ignorano l'esistenza stessa degli elementi allineati. La proprietà clear:both consente al footer o a qualsiasi altro blocco di vedere gli elementi che sono caduti fuori dal flusso e disabilita il wrapping (float) sia a sinistra che a destra. Pertanto, nel nostro esempio, il piè di pagina si sposterà verso il basso.

  Allineamento verticale

  Ci sono casi in cui non è sufficiente impostare l'allineamento del centro in modalità CSS, è necessario anche modificare la posizione verticale del blocco figlio. Qualsiasi elemento inline o inline-block può essere a filo con il bordo superiore o inferiore, trovarsi al centro di un elemento padre o trovarsi in una posizione arbitraria. Molto spesso, un blocco deve essere centrato, operazione che viene eseguita utilizzando l'attributo vertical-align. Diciamo che ci sono due blocchi, uno annidato nell'altro. In questo caso, il blocco interno è un elemento inline-block (visualizzazione: inline-block). Devi allineare il blocco figlio verticalmente:

  • allineamento superiore - .child(vertical-align:top);
  • allineamento centrale - .child(vertical-align:middle);
  • allineamento inferiore - .child(vertical-align:bottom);

  Gli elementi a livello di blocco non sono interessati dall'allineamento del testo o dall'allineamento verticale.

  

  Possibili problemi con i blocchi allineati

  A volte centrare un div in modo CSS può causare piccoli problemi. Ad esempio, quando si usa float: diciamo che ci sono tre blocchi: .first, .second e .third. Il secondo e il terzo blocco si trovano nel primo. L'elemento con classe second è allineato a sinistra e l'ultimo blocco è allineato a destra. Dopo l'allineamento, entrambi sono caduti fuori dal flusso. Se l'elemento padre non ha un'altezza impostata (ad esempio, 30em), non si estenderà più all'altezza dei blocchi figlio. Per evitare questo errore, usano uno "spacer", un blocco speciale che vede .second e .third. Codice CSS:

  • .secondo(flottante:sinistra)
  • .terzo(flottante:destra)
  • .clearfix(height:0; clear: entrambi;)

  Viene spesso utilizzata la pseudo-classe :after, che permette anche di rimettere a posto i blocchi creando uno pseudo spacer (nell'esempio, il div con la classe container si trova all'interno di .first e contiene .left e .right):

  • .sinistra(flottante:sinistra)
  • .destra(flottante:destra)
  • .container:after(content:""; display:table; clear:entrambi;)

  Le opzioni di cui sopra sono le più comuni, anche se esistono diverse varianti. Puoi sempre trovare il modo più semplice e conveniente per creare uno pseudo distanziatore attraverso la sperimentazione.

  Un altro problema che spesso i progettisti di layout devono affrontare è l'allineamento degli elementi inline-block. Uno spazio viene automaticamente aggiunto dopo ciascuno di essi. La proprietà margin, che è impostata su un margine negativo, aiuta a far fronte a questo. Ci sono altri modi che vengono usati molto meno spesso: per esempio, azzerando In questo caso, font-size:0 è scritto nelle proprietà dell'elemento genitore. Se è presente del testo all'interno dei blocchi, la dimensione del carattere richiesta viene già restituita nelle proprietà degli elementi del blocco in linea. Ad esempio, font-size:1em. Il metodo non è sempre conveniente, quindi l'opzione con rientri esterni viene utilizzata molto più spesso.

  

  L'allineamento dei blocchi ti consente di creare pagine belle e funzionali: questo è il layout del layout generale, l'ubicazione delle merci nei negozi online e le foto su un sito di biglietti da visita.