Allineamento orizzontale html. Centrare un blocco usando i CSS

Nel processo di impaginazione delle pagine web, il compito di centrare i blocchi è abbastanza comune. Può essere un centraggio verticale o orizzontale.

Ad esempio, se il sito ha una larghezza fissa, sarebbe razionale allinearlo al centro della finestra del browser, perché questo rende il testo più facile da leggere (soprattutto se il monitor è grande). Alcuni progetti generalmente prevedono il posizionamento del blocco al centro della finestra del browser, ovvero sia il centraggio verticale che quello orizzontale.

Innanzitutto parliamo del centraggio orizzontale. La tecnica più popolare consiste nel centrare il blocco impostando i margini destro e sinistro su "auto". Diciamo che vogliamo centrare un blocco con id = "contenitore" e una larghezza di 860px. In questo caso nel file CSS bisogna scrivere:

#contenitore (
colore di sfondo:#EEE;
larghezza:860px;
margine:0px automatico;
}

Tuttavia, I.E. le versioni precedenti (5.0 per esempio) non allineeranno questo blocco centrato. Ovviamente nessuno usa più browser così antichi (su 1800 dei miei visitatori giornalieri - solo 1), ma per ogni evenienza è meglio farlo funzionare anche lì :)

Per fare ciò, l'elemento genitore, cioè quello all'interno del quale centriamo il nostro blocco (di solito l'elemento genitore è il tag BODY), deve impostare il parametro text-align:center. In questo caso, il blocco sarà allineato al centro, ma anche tutto il suo contenuto sarà allineato al centro, ma non ne abbiamo bisogno. Pertanto, all'interno di questo blocco impostiamo l'allineamento predefinito - text-align:left .

corpo (allineamento testo:centro)

#contenitore (
colore di sfondo:#EEE;
larghezza:860px;
margine:0px automatico;
allineamento testo:sinistra;
}

Esiste anche un altro modo per allineare orizzontalmente un blocco, basato su . Come probabilmente saprai, per impostazione predefinita, qualsiasi elemento del blocco viene premuto sul bordo sinistro dell'elemento genitore. Pertanto, per allinearlo al centro è necessario:

2. Spostalo a destra del 50% della larghezza della finestra del browser

3. Usando il riempimento negativo, spostalo a sinistra di una distanza pari alla metà della larghezza del blocco.

In questo modo il blocco sarà centrato. Per maggiore chiarezza guardate il video qui sotto:

Esempio di codice CSS:

#contenitore (
colore di sfondo:#559964;
posizione:assoluta;
sinistra:50%;
margine sinistro:-430px;
larghezza:860px;
}

Va notato che se si desidera posizionare un blocco non rispetto alla finestra del browser, ma, ad esempio, rispetto a un altro blocco, quindi per quest'altro blocco è necessario impostare position: relative;

Diciamo che il nostro blocco #container, che deve essere centrato, si trova all'interno del blocco #wrap. Quindi il codice sarà simile a questo:

#wrap(posizione:relativa)

#contenitore (
colore di sfondo:#559964;
posizione:assoluta;
sinistra:50%;
margine sinistro:-430px;
larghezza:860px;
}

Consideriamo ora il caso in cui è necessario allineare un blocco al centro della pagina, ad es. Applicare la centratura orizzontale e verticale contemporaneamente. Anche qui entra in gioco il posizionamento. Quindi abbiamo bisogno di:

1. Impostare il blocco sul posizionamento assoluto

2. Spostalo verso destra del 50% e verso il basso del 50%, posizionando così il suo angolo superiore sinistro al centro della finestra del browser.

3. Usando il riempimento negativo, spostalo verso l'alto di una distanza pari a metà dell'altezza del blocco e verso sinistra di una distanza pari a metà della larghezza del blocco.

Ciò posizionerà il blocco al centro della pagina web.

Diciamo che l'altezza del nostro blocco è 600px e la larghezza è 860px. Quindi il codice CSS sarà simile a questo:

#contenitore (
colore di sfondo:#559964;
posizione:assoluta;
superiore:50%;
sinistra:50%;
margine superiore: -300px;
margine sinistro:-430px;
altezza:600px;
larghezza:860px;
}

Spero che il principio stesso ti sia chiaro.

Valuta la lezione: 1 2 3 4 5

Commenti:

Sarò il primo a guardare la lezione!!!

Eh... Secondo =) Recentemente ho riscontrato questo problema in IE, ne ho sofferto per molto tempo)) Grazie =)

Grazie, pagina aggiunta ai segnalibri)))

Grazie mille, Andrey, per le nuove lezioni!

Solo grazie, non credo ci sia niente da aggiungere qui))

Grazie per la lezione, ho letteralmente provato a farlo un paio di giorni fa, ho sofferto un po' e l'ho messo temporaneamente da parte

Ma ho un problema: il sito in Mozille Firefox non vuole essere allineato, è bloccato sul bordo sinistro e basta, niente di quanto sopra aiuta (lo stesso in Opera).

perché non funziona? - "se si desidera posizionare un blocco non rispetto alla finestra del browser, ma, ad esempio, rispetto a un altro blocco, per quest'altro blocco è necessario impostare position: relative;"

Grazie mille!! semplicemente un GIGANTESCO grazie! Dio ti benedica!

Va tutto bene, ma per qualche motivo tutte le immagini vanno a posto solo dopo aver aggiornato il browser. Per favore dimmi perché succede questo?

Andrey, per favore aggiungi una ricerca sul sito.

Aggiungi un commento.

CSS

HTML

Penso che molti di voi che hanno avuto a che fare con il layout abbiano riscontrato la necessità di allineare gli elementi verticalmente e conoscano le difficoltà che sorgono quando si allinea un elemento al centro.

Sì, esiste una speciale proprietà di allineamento verticale multivalore nei CSS per l'allineamento verticale. Tuttavia, in pratica non funziona affatto come previsto. Proviamo a capirlo.

Confrontiamo i seguenti approcci. Allinea utilizzando:

• tavoli,
• rientranza,
• altezza della linea
• allungamento,
• margine negativo,
• trasformare
• pseudoelemento
• flexbox.

Per illustrare, considerare il seguente esempio.

Sono presenti due elementi div, uno dei quali annidato nell'altro. Diamo loro le classi corrispondenti: esterna e interna.

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

Consideriamo innanzitutto il caso in cui siano note le dimensioni dei blocchi esterni ed interni. Aggiungiamo la regola display: inline-block all'elemento interno e text-align: center e vertical-align: middle all'elemento esterno.

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

Impostiamo le dimensioni dei blocchi e i colori dello sfondo in modo da poterne vedere i bordi.

Esterno ( larghezza: 200px; altezza: 200px; allineamento testo: centro; allineamento verticale: centro; colore sfondo: #ffc; ) .interno ( display: blocco in linea; larghezza: 100px; altezza: 100px; colore 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à vertical-align influisce sull'allineamento dell'elemento stesso, non sul suo contenuto (tranne quando viene applicata alle celle della tabella). Pertanto, l'applicazione di questa proprietà all'elemento esterno non ha prodotto nulla. Inoltre, anche applicare questa proprietà a un elemento interno non avrà alcun effetto, poiché i blocchi inline sono allineati verticalmente rispetto ai blocchi adiacenti e nel nostro caso abbiamo un blocco inline.

Esistono diverse tecniche per risolvere questo problema. Di seguito daremo uno sguardo più da vicino a ciascuno di essi.

Allineamento tramite tabella La prima soluzione che mi viene in mente è sostituire il blocco esterno con una tabella di una cella. In questo caso l'allineamento verrà applicato al contenuto della cella, cioè al blocco interno.

http://jsfiddle.net/c1bgfffq/1/

L'ovvio svantaggio di questa soluzione è che, da un punto di vista semantico, non è corretto utilizzare le tabelle per l'allineamento. Il secondo svantaggio è che per creare una 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 nei CSS.

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

Allineamento tramite rientranze Se si conoscono le altezze dei blocchi interno ed esterno, è possibile impostare l'allineamento utilizzando le rientranze verticali del blocco interno utilizzando la formula: (H esterna – H interna) / 2.

Esterno (altezza: 200px; ) .interno (altezza: 100px; margine: 50px 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 line-height Se sai che il blocco interno non dovrebbe 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 estendersi alla seconda riga, si consiglia di aggiungere anche lo spazio bianco: nowrap e overflow: hidden rule.

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

Questa tecnica può essere utilizzata anche per allineare il testo su più righe se si ridefinisce il valore dell'altezza della riga per il blocco interno e si aggiungono anche le regole display: inline-block e vertical-align: middle.

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

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza del blocco esterno.

Allineamento mediante “stretching” Questo metodo può essere utilizzato quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno.

Per fare questo è necessario:

impostare il posizionamento relativo al blocco esterno e il posizionamento assoluto al blocco interno;

aggiungi le regole top: 0 e bottom: 0 al blocco interno, in conseguenza del quale si allungherà fino all'intera altezza del blocco esterno;

imposta il riempimento verticale del blocco interno su automatico.

.outer ( posizione: relativa; ) .inner ( altezza: 100px; posizione: assoluta; superiore: 0; inferiore: 0; margine: automatico 0; )
http://jsfiddle.net/c1bgfffq/4/

L'idea alla base di questa tecnica è che l'impostazione di un'altezza per un blocco allungato e posizionato in modo assoluto fa sì che il browser calcoli il riempimento verticale in un rapporto uguale se è impostato su auto .

Allineamento utilizzando il margine negativo superiore Questo metodo è diventato ampiamente noto e viene utilizzato molto spesso. Come il precedente, si usa quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno.

È necessario impostare il blocco esterno sul posizionamento relativo e il blocco interno sul posizionamento assoluto. Quindi devi spostare il blocco interno verso il basso di metà dell'altezza del blocco esterno top: 50% e sollevarlo di metà della sua altezza margin-top: -H inner / 2.

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

Lo svantaggio di questo metodo è che è necessario conoscere l'altezza dell'unità interna.

Allineamento tramite trasformazione Questo metodo è simile al precedente, ma può essere utilizzato quando l'altezza del blocco interno non è nota. In questo caso, invece di impostare un riempimento pixel negativo, puoi utilizzare la proprietà trasforma e spostare il blocco interno verso l'alto utilizzando la funzione TranslateY e un valore di -50% .

Esterno ( posizione: relativa; ) .interno ( posizione: assoluta; superiore: 50%; trasformazione: traduciY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Perché era impossibile impostare il valore come percentuale nel metodo precedente? Poiché i valori del margine percentuale sono calcolati rispetto all'elemento genitore, un valore del 50% sarebbe la metà dell'altezza del riquadro esterno e dovremmo alzare il riquadro interno a metà della sua altezza. La proprietà di trasformazione è perfetta per questo.

Lo svantaggio di questo metodo è che non può essere utilizzato se l'unità interna ha un posizionamento assoluto.

Allineamento con Flexbox Il modo più moderno di allineamento verticale è utilizzare il layout flessibile della scatola (popolarmente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, disponendoli quasi ovunque. L'allineamento centrale per Flexbox è un compito molto semplice.

Il blocco esterno deve essere impostato su display: flex e il blocco interno su margin: auto . E questo è tutto! Bello, non è vero?

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

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

Quale metodo dovrei scegliere? È necessario iniziare dalla dichiarazione del problema:

• Per allineare verticalmente il testo, è meglio utilizzare i rientri verticali o la proprietà line-height.
• Per gli elementi posizionati in modo assoluto con un'altezza nota (ad esempio, le icone), il metodo con una proprietà margin-top negativa è l'ideale.
• Per i casi più complessi, quando non si conosce l'altezza del blocco, è necessario utilizzare uno pseudo elemento o la proprietà trasforma.
• Bene, se sei così fortunato da non aver bisogno di supportare le versioni precedenti del browser IE, allora, ovviamente, è meglio usare Flexbox.

Un designer a volte ha una domanda: come centrare gli elementi verticalmente? E questo causa alcuni problemi. Tuttavia, esistono diversi metodi per centrare gli elementi verticalmente e ciascuno di questi metodi è abbastanza semplice. In questo articolo vengono descritti alcuni di questi metodi.

Per vedere ciascun metodo in azione, fai clic sul pulsante demo o sull'immagine.

Discutiamo alcuni dei problemi che impediscono il centraggio verticale.

Allineamento verticale

Centrare orizzontalmente un elemento è abbastanza semplice da implementare (usando i CSS). Un elemento in linea può essere centrato orizzontalmente assegnando al contenitore principale una proprietà di allineamento del testo center . Quando un elemento è un elemento a blocchi, per centrarlo è sufficiente impostare la larghezza (width) e impostare i valori dei margini destro (margin-right) e sinistro (margin-left) su auto.

Per quanto riguarda il testo: molte persone stanno iniziando a utilizzare la proprietà di allineamento verticale per la centratura. È logico e la mia prima scelta sarebbe la stessa. Per centrare un elemento in una tabella, puoi utilizzare l'attributo valign.

Tuttavia, l'attributo valign funziona solo se applicato a una cella (ad esempio, ). La proprietà CSS vertical-align può essere applicata a una cella e ad alcuni elementi in linea.

• Il testo è centrato rispetto all'altezza della riga (interlinea).
• Rispetto alla tabella, senza entrare nei dettagli, la centratura avviene rispetto all'altezza della riga.

Sfortunatamente, la proprietà vertical-align non può essere applicata a elementi a livello di blocco, come un paragrafo (p) all'interno di un tag div.

Tuttavia, esistono altri metodi per centrare verticalmente gli elementi ed è comunque possibile utilizzare la proprietà di allineamento verticale dove necessario. Il metodo da utilizzare dipende da cosa centrare.

Interlinea o altezza della linea

Questo metodo dovrebbe essere utilizzato solo quando è necessario centrare una riga di testo. Per fare ciò, è necessario impostare l'altezza della riga (interlinea) dell'elemento che contiene testo su un valore maggiore della dimensione del carattere.

Per impostazione predefinita, lo spazio sopra e sotto il testo è uguale, quindi il testo è centrato verticalmente.

In questo caso non è necessario specificare l'altezza dell'elemento genitore.

Ecco il testo

Circa l'autore

Altezza della linea di allineamento verticale

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

altezza della linea .wrapper ( altezza: 100px; altezza della linea: 100px; )

Sono allineato verticalmente

posizione e margine negativo in rialzo

Un elemento può essere allineato verticalmente assegnandogli un'altezza fissa e applicando posizione: assoluta e un margine negativo verso l'alto pari alla metà dell'altezza dell'elemento da allineare. Al blocco genitore deve essere assegnata la posizione: relativa:

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

In questo modo, sfruttando il posizionamento e i margini negativi, potrai centrare un elemento sulla pagina.

visualizzazione: cella-tabella

Per l'allineamento verticale, all'elemento viene applicata la proprietà display: table-cell, che lo costringe a emulare una cella di tabella. Impostiamo anche la sua altezza e l'allineamento verticale: middle . Racchiudiamo tutto questo in un contenitore con dislpay: table; property. :

Visualizzazione dell'allineamento verticale: tabella-cella .wrapper ( visualizzazione: tabella; larghezza: 100%; ) .cell ( visualizzazione: tabella-cella; altezza: 100px; allineamento verticale: centro; )

Sono allineato verticalmente

Allineamento dinamico di 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.

Colleghiamo 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, calcoliamo e assegniamo dinamicamente le coordinate del centro della pagina alle proprietà CSS left e top:

Funzione alignCenter(elem) ( elem.css(( sinistra: ($(finestra).width() - elem.width()) / 2 + "px", superiore: ($(finestra).height() - elem. altezza()) / 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 essa la larghezza dell'elemento, divisa a metà: questo sarà il centro orizzontale della pagina. La seconda linea fa la stessa cosa, solo con l'altezza per l'allineamento verticale.

La funzione è pronta, non resta che allegarla agli eventi di preparazione del DOM e di ridimensionamento della finestra:

$(function() ( // chiama la funzione di centratura quando il DOM è pronto alignCenter($(elem)); // chiama la funzione quando si ridimensiona la finestra $(window).resize(function() ( alignCenter($(elem )); )) // funzione di centratura dell'elemento function alignCenter(elem) ( elem.css(( // calcolo delle coordinate sinistra e superiore sinistra: ($(window).width() - elem.width()) / 2 + " px", in alto: ($(finestra).height() - elem.height()) / 2 + "px" )) ) ))

Applicazione di Flexbox

Le nuove funzionalità CSS3, come Flexbox, stanno gradualmente diventando comuni. La tecnologia aiuta a creare markup senza utilizzare float, posizionamento, ecc. Può essere utilizzato anche per centrare gli elementi. Ad esempio, applica Flexbox all'elemento genitore.wrapper e centra 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 quello verticale. E senza una larghezza/altezza nota.

Risorse correlate Aiuta il progetto

Quando si impagina una pagina, è spesso necessario eseguire l'allineamento centrale utilizzando il metodo CSS: ad esempio, centrando il blocco principale. Esistono diverse opzioni per risolvere questo problema, ognuna delle quali prima o poi dovrà essere utilizzata da qualsiasi progettista di layout.

Allineamento del testo centrato

Spesso, per scopi decorativi, è necessario impostare il testo in modo che sia allineato al centro; i CSS in questo caso permettono di ridurre i tempi di impaginazione. In precedenza, ciò veniva fatto utilizzando gli attributi HTML, ma ora lo standard richiede che il testo venga allineato utilizzando i fogli di stile. A differenza dei blocchi, per i quali è necessario modificare i margini, nei CSS la centratura del testo avviene utilizzando una sola riga:

• allineamento testo:centro;

Questa proprietà viene ereditata e trasmessa dal genitore a tutti i discendenti. Colpisce non solo il testo, ma anche altri elementi. Per fare ciò, devono essere inline (ad esempio, span) o inline-block (qualsiasi blocco che abbia la proprietà display: block impostata). Quest'ultima opzione consente anche di modificare la larghezza e l'altezza dell'elemento e di regolare i rientri in modo più flessibile.

Spesso nelle pagine l'allineamento viene assegnato al tag stesso. Ciò invalida immediatamente il codice, poiché il W3C ha deprecato l'attributo align. Non è consigliabile utilizzarlo su una pagina.

Allineamento di un blocco al centro

Se hai bisogno di centrare un div, i CSS offrono un modo abbastanza conveniente: 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à dovrebbe essere 0 (imbottitura verticale) e auto (imbottitura orizzontale automatica):

• margine:0 automatico;

Ora questa opzione è riconosciuta come assolutamente valida. L'utilizzo del riempimento esterno permette anche di impostare l'immagine in modo che venga centrata: permette di risolvere molti problemi legati al posizionamento di un elemento nella pagina.

Allinea un blocco a sinistra o a destra

A volte l'allineamento centrale CSS non è richiesto, ma è necessario posizionare due blocchi affiancati: uno sul bordo sinistro, l'altro su quello destro. A questo scopo esiste una proprietà float, che può assumere uno di tre valori: left, right o none. Diciamo che hai due blocchi che devono essere affiancati. Quindi il codice sarà così:

• .sinistra (float:sinistra;)
• .right(float:destra)

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

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

Il fatto è che i blocchi con le classi sinistra e destra cadono 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 impedisce il float sia a sinistra che a destra. Pertanto, nel nostro esempio, il piè di pagina si sposterà verso il basso.

Allineamento verticale

Ci sono momenti in cui non è sufficiente impostare l'allineamento centrale utilizzando i metodi CSS; è necessario anche modificare la posizione verticale del blocco figlio. Qualsiasi elemento in linea o blocco in linea può essere nidificato sul bordo superiore o inferiore, al centro di un elemento genitore o in qualsiasi posizione. Molto spesso, il blocco deve essere allineato al centro; per questo viene utilizzato l'attributo di allineamento verticale. Diciamo che ci sono due blocchi, uno annidato nell'altro. In questo caso, il blocco interno è un elemento inline-block (visualizzazione: inline-block). È necessario allineare verticalmente il blocco figlio:

• allineamento in alto - .child(allineamento verticale:in alto);
• allineamento al centro - .child(allineamento verticale:medio);
• allineamento inferiore - .child(vertical-align:bottom);

Né l'allineamento del testo né l'allineamento verticale influiscono sugli elementi del blocco.

Possibili problemi con blocchi allineati

A volte centrare un div utilizzando i CSS può causare qualche problema. Ad esempio, quando si utilizza 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 essersi stabilizzati, entrambi sono caduti fuori dal flusso. Se l'elemento genitore non ha un'altezza impostata (ad esempio, 30em), non si estenderà più fino all'altezza dei suoi blocchi figli. Per evitare questo errore, utilizzare uno "spaziatore" - un blocco speciale che vede .second e .thhird. Codice CSS:

• .second(float:sinistra)
• .terzo(float:destra)
• .clearfix(altezza:0; chiaro: entrambi;)

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

• .sinistra(float:sinistra)
• .right(float:destra)
• .container:after(contenuto:""; display:tabella; cancella:entrambi;)

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

Un altro problema che spesso incontrano i progettisti di layout è l'allineamento degli elementi del blocco in linea. Uno spazio viene aggiunto automaticamente dopo ciascuno di essi. La proprietà margin, impostata su un rientro negativo, aiuta a far fronte a questo problema. Esistono altri metodi utilizzati molto meno frequentemente, ad esempio l'azzeramento, in questo caso nelle proprietà dell'elemento genitore viene scritto font-size: 0. 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, dimensione carattere:1em. Questo 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: ciò include la disposizione del layout generale, la disposizione dei prodotti nei negozi online e le fotografie su un sito web di biglietti da visita.