Allineamento orizzontale e verticale degli elementi. Centrare un div con la proprietà position:assoluta o fissa Centrare un div

Nei CSS alcune cose apparentemente semplici non sono così facili da fare. Una di queste cose è l'allineamento, ad es. quando un elemento deve essere posizionato in un certo modo rispetto ad un altro.

Questo articolo presenta alcune soluzioni già pronte che aiuteranno a semplificare il lavoro di centraggio degli elementi in orizzontale e/o in verticale.

Nota: sotto ciascuna soluzione è presente un elenco di browser che indica le versioni in cui funziona il codice CSS specificato.

CSS - Blocco allineamento centrale

1. Allinea un blocco al centro di un altro. In questo caso, il primo e il secondo blocco hanno dimensioni dinamiche.

... ...

Genitore ( posizione: relativa; ) .child ( posizione: assoluta; sinistra: 50%; superiore: 50%; -webkit-transform: Translate(-50%, -50%); -moz-transform: Translate(-50% , -50%); -ms-trasformazione: traduzione(-50%, -50%); -o-trasformazione: traduzione(-50%, -50%); )

  • Cromo 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

2. Allineare un blocco al centro di un altro. In questo caso il secondo blocco ha dimensioni fisse.

Parent ( posizione: relativa; ) .child ( posizione: assoluta; sinistra: 50%; superiore: 50%; /* larghezza e altezza di 2 blocchi */ larghezza: 500px; altezza: 250px; /* I valori sono determinati in base in base alle sue dimensioni */ /* margine-sinistra = - larghezza / 2 */ margine-sinistra: -250px; /* margine-top = - altezza / 2 */ margine-top: -125px )

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Allineare un blocco al centro di un altro. In questo caso, il secondo blocco ha dimensioni specificate in percentuale.

Parent ( posizione: relativa; ) .child ( posizione: assoluta; /* larghezza e altezza di 2 blocchi in % */ altezza: 50%; larghezza: 50%; /* I valori sono determinati in base alla sua dimensione in % * / sinistra: 25% /* (100% - larghezza) / 2 */ sopra: 25% /* (100% - altezza) / 2 */ )

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Allineamento orizzontale

1. Allineamento di un elemento del blocco (visualizzazione: blocco) rispetto a un altro (in cui si trova) orizzontalmente:

... ...

Blocco (margine sinistro: automatico; margine destro: automatico;)

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

2. Allinea orizzontalmente un elemento linea (display: inline) o blocco di linea (display: inline-block):

... ...

Parent ( allineamento testo: centro; ) .child ( visualizzazione: blocco in linea; )

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Allineamento verticale

1. Centrare un elemento (display: inline, display: inline-block) rispetto all'altro (in cui si trova) al centro. Il blocco genitore in questo esempio ha un'altezza fissa, che viene impostata utilizzando la proprietà line-height CSS.

... ...

Genitore (altezza della linea: 500px;) .child (visualizzazione: blocco in linea; allineamento verticale: centrale;)

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

2. Centrare verticalmente un blocco rispetto a un altro rappresentando il genitore come una tabella e il figlio come una cella di questa tabella.

Parent ( display: tabella; ) .child ( display: tabella-cella; allineamento verticale: centro; )

Browser che supportano questa soluzione:

  • Cromo 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

Se conosci altri trucchi interessanti o utili soluzioni di allineamento già pronte, condividile nei commenti.

Spesso nella pratica dobbiamo risolvere il problema del raggruppamento e dell'allineamento dei contenuti utilizzando i CSS. Oggi esamineremo i modi principali per posizionare gli elementi in una fila orizzontale.

Il materiale contenuto in questo articolo ha lo scopo di aiutare i web designer alle prime armi a padroneggiare le tecniche di layout della pagina web.

Cosa scegliere o metodi

Esistono diversi modi per disporre gli elementi strutturali in fila su un piano orizzontale. I più utili, dal punto di vista dell’applicazione pratica, sono:

  • Metodo "galleggiante".
  • Metodo "blocco in linea".
  • Metodo delle celle di tabella

Ognuno di essi ha i suoi vantaggi, applicazioni e svantaggi. Vediamoli in ordine.

“Per una svolta” o una piccola teoria

Tutti gli elementi strutturali dell'HTML possono essere suddivisi in:

In linea (integrato): tipo img, span e simili. Non abbiamo la possibilità di cambiare il loro sfondo e dare loro dimensioni lineari arbitrarie.

Blocco - occupa l'intera larghezza del blocco genitore, iniziando sempre su una nuova riga - p, h, div.

Di seguito è riportato un esempio visivo di strutture inline e a blocchi:

Metodo galleggiante

Come già noto (vedi sopra), un elemento blocco viene posizionato su una nuova riga, indipendentemente dalla larghezza specificata per esso ( larghezza). Pertanto, riducendo la dimensione orizzontale div-Oh, non puoi costruire blocchi di fila.

Il metodo di soluzione più popolare (soprattutto tra i progettisti di layout alle prime armi) consiste nell'utilizzare la proprietà galleggiante.

Proprietà CSS galleggiante ha guadagnato grande popolarità e valore pratico dopo il passaggio dal metodo di impaginazione tabulare a quello a blocchi.

Float: left (right) trasforma un elemento di blocco in un float, lo allinea al bordo sinistro (destro) del blocco genitore e imposta il testo e gli altri elementi in modo float a destra (sinistra).

Ad esempio, creiamo quattro blocchi che devono essere posizionati in fila:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Stiamo costruendo< div class = "bblock" >orizzontale< div class = "bblock" >riga< div class = "bblock" >dalle dive

E un foglio di stile esterno con il seguente contenuto:

div ( float: left; /*Imposta il rivestimento*/ line-height: 120px; font-size: 40px; background: dodgerblue; colore: bianco; margin-top: 60px; larghezza: 320px; /*Fissa la larghezza del blocco*/ )

Il risultato sono quattro blocchi disposti in fila orizzontale e allineati al bordo sinistro del blocco genitore:

A volte in pratica è necessario allineare i blocchi al bordo destro dell'elemento genitore. Cambiamo il flusso attorno ai blocchi nell'esempio precedente:

galleggiante: giusto;

Prestare attenzione alle iscrizioni situate nei blocchi. A prima vista, può sembrare che l’esempio abbia funzionato in modo storto. Ma in realtà il browser ha elaborato il codice correttamente: ha letto i blocchi dall'alto verso il basso e ha fatto quello che gli avevamo chiesto, allineandolo a destra. Tieni presente questo punto quando utilizzi la proprietà galleggiante: giusto.

Per interrompere il flusso di elementi da un luogo specifico, utilizzare la riga:

< div style= "clear: both;" >

Nell'esempio discusso sopra, impostiamo la distanza tra i blocchi utilizzando il rientro margine destro. Ma cosa fare se, quando si dispiega una pagina, si ha un compito: posizionare i blocchi in fila, centrarli e anche avere dei rientri solo tra di loro, ma non all'esterno?

L'algoritmo delle azioni è il seguente.

< div class = "wrap" > < div class = "bblock" >Stiamo costruendo< div class = "bblock" >orizzontale< div class = "bblock" >riga< div class = "bblock" >dalle dive

Wrap ( larghezza: 1310px; /*fissa la larghezza del wrapper*/ margine: 0 auto; /*centralo*/ sfondo: grigio scuro; altezza: 120px; /*Imposta l'altezza del wrapper*/ ) . bblock ( float: left; /*Imposta il rivestimento*/ altezza della linea: 120px; /*Altezza della linea + centratura verticale del testo*/ dimensione del font: 40px; sfondo: dodgerblue; colore: bianco; larghezza: 320px; /*Correggi larghezza del blocco*/ margine-destra: 10px; allineamento testo: centro; /*Centra il testo orizzontalmente*/ ). wrap : last- child ( margin- right: 0px; /*Rimuovi il margine dell'ultimo div*/ )

Di conseguenza, otteniamo la seguente immagine:

Ebbene, non è possibile considerare tutte le situazioni pratiche, quindi passiamo alle caratteristiche generali.

Importante!!!

Metodo "blocco in linea".

Sia gli elementi in linea che quelli a blocchi presentano vantaggi e svantaggi nel contesto di ogni attività specifica da risolvere. E se combinassimo i loro vantaggi?

Incontra il momento clou del programma: la proprietà visualizzazione: blocco in linea.

display: inline-block genera un elemento block-line, che è essenzialmente inline, ma mantiene le proprietà del blocco: consente di modificare le dimensioni lineari, impostare i margini, il riempimento, ecc.

Un elemento block-line ha le seguenti proprietà:

  • L'altezza e la larghezza del blocco vengono determinate automaticamente in base al contenuto e al valore di riempimento ( imbottitura)
  • l'altezza e la larghezza del blocco possono essere impostate in modo fisso
  • Non vi è alcun effetto del crollo dei confini.

Consideriamo un esempio di creazione di un semplice menu di navigazione contenente un'immagine e un collegamento.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Il collegamento al menu 1 è più lungo del solito< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Collegamento al menù 2< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Collegamento al menù 3< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Collegamento al menù 4

Nav ( display: inline- block; /*Imposta la visualizzazione della linea di blocco*/ larghezza: 180px; /*imposta la larghezza del blocco*/ background: dodgerblue; ) . string ( text-align: center; /*Allinea il testo orizzontalmente*/ )

Di conseguenza, otteniamo il seguente menu:

Come puoi vedere, è risultato un po' storto... Ma non vogliamo arrabbiarci, quindi applichiamo la proprietà CSS ai nostri div allineamento verticale(vedi sotto per i dettagli):

allineamento verticale: in alto;

La nostra barra di navigazione è ora allineata alla riga superiore:

Naturalmente l'esempio riportato è primitivo, ma sono sicura che partendo da esso si potrà creare un vero capolavoro!!!

Importante!!!

  • Per le versioni precedenti di Firefox, aggiungi la riga:

    display: - moz- inline-stack;


    e avvolgi l'elemento in un wrapper div aggiuntivo.
  • IE 7 e versioni precedenti: aggiungi le righe:

    zoom: 1 ;

  • /*set hasLayout*/ * display: inline;
/*asterisco - modifica per IE */ _height: 250px;

/*l'altezza minima non funziona in IE6*/

Noto che specifici browser reagiscono selettivamente a queste righe (Firefox al primo, IE al resto). Metodo della tabella (L'approccio tabellare è stato per lungo tempo lo standard di layout, principalmente per la semplicità e l'intuitività del markup. Molto probabilmente, questo è ciò che ha causato la comparsa della formattazione della tabella nei CSS., Proprietà visualizzazione: tabella

cella della tabella Metodo della tabella tabella in linea ), consentono di eseguire la formattazione tabellare degli elementi senza utilizzare tabelle HTML.:

< div class = "wrap" > < div class = "bblock" >Stiamo costruendo< div class = "bblock" >Per posizionare i blocchi orizzontalmente, abbiamo bisogno di un elemento genitore che abbia la proprietà< div class = "bblock" >riga< div class = "bblock" >e gli elementi figlio (celle) che hanno la proprietà

visualizzazione: cella-tabella

Importante!!!

  • A differenza dei metodi "Inline-block" e "float", quando si riduce la larghezza della finestra del browser Web, le celle non si spostano verso il basso.
  • Non hai la possibilità di impostare la proprietà margin per le celle della pseudo tabella.
  • Compatibilità tra browser. Le proprietà visualizzate: la famiglia table* non sono supportate da IE6, IE7. Inoltre, in IE8 potresti vedere un bug nel rendering dinamico per elementi pseudo-tabellari sotto forma di celle mancanti casualmente. Questo errore appare più spesso durante il disegno iniziale del documento.

    • Molto spesso il compito è allineare un blocco al centro della pagina/schermo, e anche senza uno script Java, senza impostare dimensioni rigide o rientri negativi, e in modo che le barre di scorrimento funzionino per il genitore se il blocco supera le sue dimensioni . Ci sono molti esempi monotoni su Internet su come allineare un blocco al centro dello schermo. Di norma, la maggior parte di essi si basa sugli stessi principi.

    Di seguito sono riportati i principali modi per risolvere il problema, i loro pro e contro. Per comprendere l'essenza degli esempi, consiglio di ridurre l'altezza/larghezza della finestra dei risultati negli esempi ai collegamenti forniti.

    Opzione 1: rientro negativo. Posizioniamo il blocco con gli attributi top e left al 50% e, conoscendo in anticipo l'altezza e la larghezza del blocco, impostiamo un margine negativo, pari alla metà della dimensione del blocco. Un enorme svantaggio di questa opzione è che è necessario contare i rientri negativi. Inoltre, il blocco non si comporta correttamente quando è circondato da barre di scorrimento: viene semplicemente tagliato perché ha margini negativi.

    Genitore ( larghezza: 100%; altezza: 100%; posizione: assoluta; superiore: 0; sinistra: 0; overflow: automatico; ) .block ( larghezza: 250px; altezza: 250px; posizione: assoluta; superiore: 50%; sinistra : 50%; margine: -125px 0 0 -125px img (larghezza massima: 100%; altezza: automatica; visualizzazione: blocco; margine: 0 automatico; bordo: nessuno; ) )

    Opzione 2. Rientro automatico. Meno comune, ma simile al primo. Per il blocco, imposta larghezza e altezza, posiziona gli attributi in alto a destra in basso a sinistra su 0 e imposta il margine automatico. Il vantaggio di questa opzione è quello di far funzionare le barre di scorrimento sul genitore, se quest'ultimo ha larghezza e altezza impostate al 100%. Lo svantaggio di questo metodo è l'impostazione rigida delle dimensioni.

    Genitore ( larghezza: 100%; altezza: 100%; posizione: assoluta; superiore: 0; sinistra: 0; overflow: automatico; ) .block ( larghezza: 250px; altezza: 250px; posizione: assoluta; superiore: 0; destra: 0; inferiore: 0; sinistra: 0; margine: automatico; img (larghezza massima: 100%; altezza: automatico; blocco; margine: 0 automatico; bordo: nessuno; )

    Opzione 3. Tabella. Impostiamo gli stili di tabella per la cella principale e impostiamo l'allineamento del testo al centro per la cella principale. E diamo al blocco un modello di blocco di linea. Gli svantaggi che otteniamo sono le barre di scorrimento che non funzionano e, in generale, l'estetica dell'"emulazione" della tabella non è buona.

    Genitore ( larghezza: 100%; altezza: 100%; visualizzazione: tabella; posizione: assoluta; superiore: 0; sinistra: 0; > .inner ( visualizzazione: tabella-cella; allineamento testo: centro; allineamento verticale: centro; ) ) .block ( display: inline-block; img ( display: block; bordo: none; ) )

    Per aggiungere una pergamena a questo esempio, dovrai aggiungere un altro elemento al design.
    Esempio: jsfiddle.net/serdidg/fk5nqh52/3.

    Opzione 4. Pseudoelemento. Questa opzione è priva di tutti i problemi elencati nei metodi precedenti e risolve anche i problemi originali. L'idea è di applicare uno stile allo pseudo-elemento precedente sul genitore, vale a dire altezza al 100%, allineamento al centro e modello di blocco in linea. Allo stesso modo, il blocco stesso è impostato su un modello di blocco lineare, allineato al centro. Per evitare che il blocco “cada” sotto lo pseudo-elemento quando la dimensione del primo è maggiore di quella del suo genitore, indichiamo al genitore white-space: nowrap e font-size: 0, dopodiché cancelliamo questi stili per il blocco con quanto segue: spazio bianco: normale. In questo esempio, font-size: 0 è necessario per rimuovere lo spazio risultante tra il genitore e il blocco a causa della formattazione del codice. Lo spazio può essere rimosso in altri modi, ma si ritiene meglio semplicemente evitarlo.

    Genitore ( larghezza: 100%; altezza: 100%; posizione: assoluta; superiore: 0; sinistra: 0; overflow: automatico; spazio bianco: nowrap; allineamento testo: centro; dimensione carattere: 0; &:prima ( altezza: 100%; visualizzazione: blocco in linea; allineamento verticale: centro; contenuto: "";

    Oppure, se hai bisogno che il genitore occupi solo l'altezza e la larghezza della finestra e non l'intera pagina:

    Parent ( posizione: fissa; superiore: 0; destra: 0; inferiore: 0; sinistra: 0; overflow: automatico; spazio bianco: nowrap; allineamento testo: centro; dimensione carattere: 0; &:prima ( altezza: 100%; visualizzazione: blocco in linea; allineamento verticale: centro; contenuto: ""; (visualizzazione: blocco; bordo: nessuno;)

    Opzione 5. Flexbox. Uno dei modi più semplici ed eleganti è utilizzare flexbox. Non richiede movimenti del corpo non necessari, descrive chiaramente l'essenza di ciò che sta accadendo ed è altamente flessibile. L'unica cosa che vale la pena ricordare quando si sceglie questo metodo è il supporto per IE dalla versione 10 inclusa. caniuse.com/#feat=flexbox

    Genitore ( larghezza: 100%; altezza: 100%; posizione: fissa; superiore: 0; sinistra: 0; display: flessibile; allinea-elementi: centro; allinea-contenuto: centro; giustifica-contenuto: centro; overflow: automatico; ) .block ( sfondo: #60a839; img ( display: blocco; bordo: nessuno; ) )

    Opzione 6. Trasforma. Adatto se siamo limitati dalla struttura e non c'è modo di manipolare l'elemento genitore, ma il blocco deve essere allineato in qualche modo. La funzione css Translate() verrà in soccorso. Un valore di posizionamento assoluto del 50% posizionerà l'angolo superiore sinistro del blocco esattamente al centro, quindi un valore di traslazione negativo sposterà il blocco rispetto alle sue stesse dimensioni. Tieni presente che gli effetti negativi potrebbero apparire sotto forma di bordi sfocati o stile del carattere. Inoltre, questo metodo può portare a problemi nel calcolo della posizione del blocco utilizzando Java-Script. A volte, per compensare la perdita del 50% della larghezza dovuta all'uso della proprietà CSS left, la regola specificata per il blocco può. aiuto: margine destro: -50%;

    Parent ( larghezza: 100%; altezza: 100%; posizione: fissa; superiore: 0; sinistra: 0; overflow: automatico; ) .block ( posizione: assoluta; superiore: 50%; sinistra: 50%; trasformazione: Translate( -50%, -50%); img (visualizza: blocco;))

    Opzione 7. Pulsante. Opzione utente, in cui il blocco è incorniciato in un tag di pulsante. Il pulsante ha la proprietà di centrare tutto ciò che si trova al suo interno, ovvero gli elementi del modello inline e block-line (inline-block). In pratica non consiglio di usarlo.

    Genitore ( larghezza: 100%; altezza: 100%; posizione: assoluta; superiore: 0; sinistra: 0; overflow: automatico; sfondo: nessuno; bordo: nessuno; contorno: nessuno; ) .block ( display: inline-block; img (display: blocco;; bordo: nessuno; ) )

    Bonus Utilizzando l'idea della 4a opzione, puoi impostare i margini esterni per il blocco, e allo stesso tempo quest'ultimo verrà adeguatamente visualizzato circondato da barre di scorrimento.
    Esempio: jsfiddle.net/serdidg/nfqg9rza/2.

    Puoi anche allineare l'immagine al centro e, se l'immagine è più grande dell'immagine principale, ridimensionarla in base alle dimensioni dell'immagine principale.
    Esempio: jsfiddle.net/serdidg/nfqg9rza/3.
    Esempio con un'immagine grande:

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

    Vantaggi del layout utilizzando un tag

    Esistono due tipi principali di struttura del sito web:

    • Tabellare;
    • Bloccare.

    Il layout tabellare era dominante anche agli albori di Internet. I suoi vantaggi includono la precisione del posizionamento specificato. Ma, tuttavia, presenta evidenti difetti. I principali sono la lunghezza del codice e la bassa velocità di caricamento.

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

    Oltre all'elevata velocità di caricamento, la costruzione a blocchi di un sito Web consente di ridurre più volte la quantità di codice html. Anche attraverso l'utilizzo delle classi CSS.

    Tuttavia, è opportuno utilizzare il layout tabellare per strutturare la visualizzazione dei dati sulla pagina. Un classico esempio del suo utilizzo è la visualizzazione di tabelle.

    La costruzione di blocchi basata su tag è anche chiamata livello per livello e i blocchi stessi sono chiamati livelli. Questo perché quando vengono utilizzati determinati valori di proprietà, questi possono essere impilati uno sopra l'altro, in modo simile ai livelli in Photoshop.

    Ausili per il posizionamento

    Nel layout a blocchi, è meglio posizionare i livelli utilizzando i fogli di stile a cascata. La principale proprietà CSS responsabile del layout è float.
    Sintassi della proprietà:
    float: sinistra | giusto | nessuno | ereditare
    Dove:

    • sinistra: allinea l'elemento al bordo sinistro dello schermo. Il flusso attorno ai restanti elementi avviene a destra;
    • destra – allineamento a destra, flusso attorno ad altri elementi – a sinistra;
    • nessuno – non è consentito il confezionamento;
    • eredita – eredita il valore dell'elemento genitore.

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

    #left ( larghezza: 200px; altezza: 100px; float: sinistra; sfondo: rgb(255,51,102); ) #right ( larghezza: 200px; altezza: 100px; float: destra; sfondo: rgb(0,255,153); ) Blocco sinistro Blocco destro

    Adesso proveremo ad utilizzare la stessa proprietà per posizionare il terzo div al centro della pagina. Ma sfortunatamente float non ha un valore centrale. E quando assegni a un nuovo blocco un valore di allineamento a destra o a sinistra, viene spostato nella direzione specificata. Pertanto non resta che impostare float: left su tutti e tre i blocchi:

    Ma neanche questa è l’opzione migliore. Quando la dimensione della finestra viene ridotta, tutti i livelli vengono allineati verticalmente in una riga e quando la dimensione viene aumentata, rimangono attaccati al bordo sinistro della finestra. Quindi abbiamo bisogno di un modo migliore per centrare il div.

    Strati di centratura

    Nel prossimo esempio utilizzeremo un livello contenitore in cui posizioneremo gli elementi rimanenti. Ciò risolve il problema dei blocchi che si spostano l'uno rispetto all'altro quando viene modificata la dimensione della finestra. Il centraggio del contenitore al centro viene effettuato impostando le proprietà del margine su zero per i margini dal bordo superiore e auto sui lati (margine: 0 auto ):

    #container ( larghezza: 600px; margine: 0 auto; ) #left ( larghezza: 200px; altezza: 100px; float: sinistra; sfondo: rgb(255,51,102); ) #right ( larghezza: 200px; altezza: 100px; float : sinistra; sfondo: rgb(0,255,153); #center ( larghezza: 200px; altezza: 100px; float: sinistra; sfondo: rgb(255,0,0); ) Blocco sinistro Blocco centrale Blocco destro

    Lo 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 (ridurlo). Cioè, dopo aver modificato la sua classe CSS dovrebbe assomigliare a questa:

    Dopo la modifica, tutti i blocchi si allineeranno rigorosamente in fila al centro. E la loro posizione non cambierà indipendentemente dalle dimensioni della finestra del browser. Ecco come appare la centratura verticale di un div:

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

    #container (larghezza: 450px; altezza:150px; margine:0 auto; background-color:#66CCFF; ) #left (larghezza: 100px; altezza: 100px; background: rgb(255,51,102); display: inline-block; allineamento verticale: centro; margine sinistro: 35px; ) #destra ( larghezza: 100px; altezza: 100px; sfondo: rgb(0,255,153); display: blocco in linea; allineamento verticale: centro; margine sinistro: 35px; ) #center ( larghezza: 100px; altezza: 100px; sfondo: rgb(255,0,0); display: blocco in linea; allineamento verticale: centro; margine sinistro: 35px; )

    Una breve descrizione delle proprietà CSS e dei loro valori che abbiamo utilizzato in questo esempio per centrare un div all'interno di un div:

    • display: inline-block – allinea un elemento di blocco in una linea e garantisce che si avvolga attorno a un altro elemento;
    • vertical-align: middle – allinea l'elemento al centro rispetto al genitore;
    • margin-left – imposta il margine sinistro.
    Come creare un collegamento da un livello

    Per quanto strano possa sembrare, questo è possibile. A volte può essere necessario un blocco div come collegamento quando si dispongono vari tipi di menu. Diamo un'occhiata a un esempio pratico di implementazione di un livello di collegamento:

    #layer1( larghezza: 500px; altezza: 100px; sfondo: rgb(51,255,204); bordo:scanalatura; ) a ( display: blocco; allineamento testo: centro; altezza: 100%; colore: rgb(255,0,51) ;) Collegamento al nostro sito web

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

    Nascondere e mostrare elementi di blocco

    Gli elementi a blocchi offrono maggiori opportunità per espandere la funzionalità dell'interfaccia rispetto al layout tabellare obsoleto. Accade spesso che il design del sito web sia unico e riconoscibile. Ma per una tale esclusiva devi pagare con la mancanza di spazio libero.

    Ciò è particolarmente vero per la pagina principale, sulla quale il costo della pubblicità è il più alto. Si pone quindi il problema di dove “infilare” un altro banner pubblicitario. E qui non puoi farla franca allineando il div al centro della pagina!

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

    #layer1( display:blocco; larghezza: 500px; altezza: 100px; sfondo: rgb(51,255,204); border:groove; ) funzione mostra() ( if(layer1=="none") ( layer1="blocco"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

    Questo è il pulsante magico. Facendo clic su di esso verrà nascosto o mostrato il blocco nascosto.

    In questo esempio, la posizione dei blocchi div non cambia in alcun modo. Utilizza una semplice funzione JavaScript che modifica il valore della proprietà display CSS dopo aver fatto clic su un pulsante (evento onclick).

    CSS - Layout e allineamento al centro delle pagine del sito Web Il layout e l'allineamento al centro delle pagine del sito Web è uno sforzo creativo e spesso causa difficoltà ai principianti. Vediamo quindi come farlo. Diciamo che vogliamo creare una pagina con la seguente struttura:

    La nostra pagina è composta da quattro blocchi: intestazione, menu, contenuto e piè di pagina. Per centrare la pagina, posizioneremo questi quattro blocchi in un blocco principale:

    Intestazione del sito

    Contenuto

    Parte inferiore del sito

    Usando questa struttura come esempio, prenderemo in considerazione diverse opzioni.

    Layout e centratura di un sito in gomma

    Quando si posa un sito in gomma, l'unità di misura principale utilizzata è -%, perché il sito dovrebbe estendersi su tutta la larghezza e occupare tutto lo spazio libero.

    Pertanto, la larghezza dei blocchi "intestazione" e "piè di pagina" sarà pari al 100% della larghezza dello schermo. Lascia che la larghezza del blocco "menu" sia del 30% e il blocco "contenuto" dovrebbe trovarsi accanto al blocco "menu", ad es. deve avere un margine sinistro (margin-left) di larghezza pari alla larghezza del blocco "menu", cioè 30%.

    Per affiancare i blocchi "menu" e "contenuto", rendiamo mobile il blocco "menu" e spostiamolo sul bordo sinistro. Imposteremo anche i colori di sfondo per i nostri blocchi. Ora scriviamo tutto questo nel foglio di stile (nella pagina style.css)

    #header( background:#3e4982; larghezza:100%; altezza:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :sinistra; larghezza:300px; allineamento testo:centro; dimensione carattere:18px; #content(sfondo:#ffffff; margine sinistro:30%; altezza:300px; allineamento testo:centro; ) #footer( sfondo: #3e4982; chiaro: entrambi; larghezza: 100%; altezza: 50px; colore: #FFFFFF; dimensione del carattere: 14px;

    L'altezza dei blocchi è stata impostata in modo condizionale in modo che il risultato fosse visibile. Guarda la nostra pagina nel tuo browser:

    Se modifichi la dimensione della finestra del browser, cambierà la larghezza di tutti i blocchi. Questo non è sempre conveniente, perché... Quando il blocco del menu è allungato, appare uno spazio vuoto. Pertanto, la larghezza del blocco “menu” è spesso fissa, quindi facciamo lo stesso. Per fare ciò, sostituisci i valori delle proprietà corrispondenti nel foglio di stile:

    ... #menu( background:#6173cb; float:left; larghezza:200px; altezza:300px; ) #content( background:#ffffff; margine-sinistra:200px; altezza:300px; ) ...

    Ora la nostra pagina si allunga in modo più naturale. Con il layout fluido, le pagine occupano l'intera larghezza dello schermo, pertanto non è necessario l'allineamento delle pagine.

    Ma se vuoi, puoi fare in modo che la tua pagina abbia la stessa imbottitura a sinistra e a destra dello schermo. Per fare ciò è necessario aggiungere uno stile al blocco "principale", che è un contenitore per tutti gli altri blocchi:

    Ora la nostra pagina appare così:

    Layout e centratura del sito, larghezza fissa

    In questo caso dovremo impostare dimensioni fisse per i nostri blocchi:

    #main( larghezza:800px; ) #header( sfondo:#3e4982; larghezza:800px; altezza:150px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere:24px; imbottitura in alto:40px; ) #menu ( sfondo:#6173cb; float:sinistra; larghezza:200px; altezza:300px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere:18px; riempimento-top:10px; ) #content( sfondo:#ffffff; margine sinistro:200px; altezza:300px; allineamento testo:centro; ) #footer( sfondo:#3e4982; chiaro:entrambi; larghezza:800px; altezza:50px; allineamento testo:centro; colore:#FFFFFF; carattere- dimensione: 14px; imbottitura superiore: 10px;

    Ora la nostra pagina viene premuta sul bordo sinistro dello schermo.

    In questo caso, l'allineamento centrale delle pagine del sito può essere effettuato come segue. Ricordiamo che la nostra pagina ha un tag "body", al quale può anche essere assegnata una larghezza e del riempimento.

    Facciamo questo: diamo al tag "body" una larghezza di 800 pixel (come il blocco "main") e un riempimento sinistro del 50%. Quindi l'intero contenuto del blocco "principale" verrà visualizzato sul lato destro dello schermo (cioè dal centro verso destra):

    Affinché il nostro blocco "principale" si trovi al centro dello schermo, la sua metà deve coincidere con la metà del tag "body". Quelli. è necessario spostare il blocco "principale" a sinistra della metà delle sue dimensioni. La larghezza del blocco "principale" è 800 pixel, il che significa che è necessario impostare la proprietà "margin-left:-400px" su di esso. Sì, questa proprietà può assumere valori negativi, quindi il margine sinistro viene ridotto (cioè spostato a sinistra). E questo è esattamente ciò di cui abbiamo bisogno.

    Il foglio di stile ora assomiglia a questo:

    corpo( larghezza:800px; riempimento-sinistra:50%; ) #main( larghezza:800px; margine-sinistra:-400px; ) #intestazione( sfondo:#3e4982; larghezza:800px; altezza:150px; allineamento testo:centro ; colore:#FFFFFF; dimensione carattere:24px; imbottitura in alto:40px; ) #menu( sfondo:#6173cb; float:sinistra; larghezza:200px; altezza:300px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere: 18px; imbottitura in alto: 10px; ) #content( sfondo:#ffffff; margine sinistro: 200px; altezza: 300px; allineamento testo: centro; ) #footer( sfondo:#3e4982; chiaro: entrambi; larghezza: 800px; allineamento testo: centro; dimensione carattere: 14px;

    E la nostra pagina nel browser si trova esattamente al centro:

    Abbiamo esaminato due opzioni per centrare le pagine del sito, in effetti non sono un dogma. Puoi sperimentare e creare la tua versione, basta controllare come funziona in diversi browser. Sfortunatamente, ciò che viene visualizzato bene in FireFox o Opera potrebbe essere visualizzato in modo del tutto incomprensibile in IE e viceversa. E dobbiamo ricordarlo.

    Buona fortuna a te nella tua ricerca creativa!

    

    Se hai trovato utile questo sito, dai un'occhiata al nostro altro



    Consigliamo la lettura