, è 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 - ereditarietà del valore elemento genitore.

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

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 questo 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

V seguente esempio useremo 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 eseguito impostando le proprietà del margine valore zero padding dall'alto e auto ai lati (margine: 0 auto):

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, per centrare gli strati all'interno del contenitore, abbiamo utilizzato una serie di nuovi proprietà css :

Una breve descrizione delle proprietà CSS e dei loro valori che abbiamo usato in questo esempio per centrare un div all'interno di un 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 potrebbe essere necessario un blocco div come collegamento per il layout tipi diversi menù. Tenere conto esempio pratico implementazione del livello di riferimento:

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ù possibilità per espandere la funzionalità dell'interfaccia rispetto al layout della 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.

Soprattutto riguarda home page, il costo del posizionamento dell'annuncio è il più alto. Pertanto, c'è un problema dove "spingere" un altro banner pubblicitario... E anche qui allinea div non puoi scendere dal centro della pagina!

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

A creazione di div blocchi, probabilmente ti sei imbattuto in situazioni in cui devi centrare il tuo div orizzontalmente e verticalmente usando puro CSS. Ad esempio, quando si creano popup con. Esistono diversi modi per implementare il centraggio e in questo articolo condividerò i miei modi preferiti e facili utilizzando CSS o jQuery.

Per cominciare, le basi:

Centratura orizzontale con CSS

È facile, usiamo margine per noi div bloccare.

NomeClasse (margine: 0 auto; larghezza: 200 px; altezza: 200 px;)

Per centrare blocco div solo orizzontalmente, devi definire la larghezza del blocco (larghezza), usa la proprietà auto per i margini sinistra e destra... Questo metodo funzionerà per tutti elementi di blocco(div, p, h1 e così via...). Per applicare il centraggio orizzontale per gli elementi in linea (link, immagini...), è necessario applicare il parametro Schermo:bloccare;

Centratura orizzontale e verticale con CSS

Centrare il blocco div orizzontalmente e verticalmente allo stesso tempo è un po' più complicato. È necessario conoscere in anticipo le dimensioni del blocco div.

ClassName (larghezza: 300 px; altezza: 200 px; posizione: assoluta; sinistra: 50%; superiore: 50%; margine: -100 px 0 0 -150 px;)

attraverso assoluto posizionando il blocco, possiamo staccarlo dagli elementi circostanti e determinarne la posizione in relazione alle dimensioni della finestra del browser. Sposta il blocco div su 50% sinistra e in alto della finestra. L'angolo in alto a sinistra del blocco è ora al centro della finestra del browser. Resta da impostare il blocco div al centro della pagina spostandolo su metà della sua larghezza sinistra e metà della sua altezza su. Evviva! Il risultato è un eccellente centraggio del blocco su css puro codice.

Centratura orizzontale e verticale con jQuery

Come menzionato prima - Metodo CSS il centraggio funziona solo con quote fisse. Se le dimensioni non vengono specificate, viene in soccorso il metodo jQuery:

$ (finestra) .resize (funzione () ($ (". nomeclasse"). css ((posizione: "assoluta", sinistra: ($ (finestra) .width () - $ (". nomeclasse"). )) / 2, in alto: ($ (window) .height () - $ (". ClassName"). OuterHeight ()) / 2));)); // Per eseguire la funzione quando la finestra è caricata: $ (window) .resize ();

Funzionamento questo metodoè eseguire la funzione resize() usando la riga $ (finestra) .ridimensiona ()... Questa funzione funziona ogni volta che la finestra del browser viene ridimensionata. Noi usiamo larghezza esterna () e altezza esterna () perché al contrario di larghezza () e altezza (), includono l'imbottitura e la larghezza dei bordi nella dimensione restituita. L'ultima riga avvia il processo di centraggio del blocco div al caricamento della pagina.

Il vantaggio dell'utilizzo di questo metodo è che potresti non sapere quale sia la dimensione del blocco div. Il principale svantaggio- funziona solo con JavaScript abilitato. Pertanto, questo metodo è accettabile per interfacce multifunzionali come Vkontakte, Facebook, ecc.

Come sempre, puoi suggerire il tuo metodo preferito per centrare i blocchi scrivendo in un commento.

Quante copie sono già state rotte sull'attività di allineamento degli elementi sulla pagina. Ecco una traduzione dell'eccellente articolo di Stephen Shaw sulla risoluzione di questo problema per Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Lo sapevamo tutti margine: 0 automatico; per centraggio orizzontale, ma margine: automatico; non ha funzionato per il verticale. Questo può essere facilmente risolto impostando semplicemente l'altezza e applicando i seguenti stili:

Absolute-Center (margine: auto; posizione: assoluto; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)
Non sono il primo a suggerire questa soluzione, tuttavia questo approccio è usato raramente quando allineamento verticale... Nei commenti su Come centrare qualsiasi cosa con i CSS, Simon si collega a un esempio jsFiddle dove soluzione perfetta per il centraggio verticale. Eccone altri su questo argomento.

Diamo un'occhiata più da vicino al metodo.

Dignità

• Compatibile con più browser (incluso IE 8-10)
• Nessun markup aggiuntivo, stili minimi
• Adattabilità
• Indipendenza da imbottitura(privo di dimensionamento della scatola!)
• Funziona per le immagini

Screpolatura

• L'altezza deve essere specificata (vedi Altezza variabile)
• Si consiglia di chiedere overflow: auto in modo che il contenuto non si insinui
• Non funziona su Windows Phone

Compatibilità del browser

Il metodo è stato testato e funziona alla grande in Chrome, Firefox, Safari, Mobile Safari e persino IE 8-10. Un utente ha affermato che il contenuto non è allineato verticalmente su Windows Phone.

All'interno del contenitore

Contenuto inserito in un contenitore con posizione: relativa si allineerà perfettamente:

Absolute-Center (larghezza: 50%; altezza: 50%; overflow: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

Utilizzo della vista

Imposta il contenuto su position: fixed e imposta lo z-index:

Absolute-Center.is-Fixed (larghezza: 50%; altezza: 50%; overflow: auto; margine: auto; posizione: fissa; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0; z-index: 999;)

Adattabilità

Il vantaggio principale del metodo descritto è un lavoro eccellente quando l'altezza o la larghezza è data in percentuale e persino la comprensione larghezza minima / larghezza massima e altezza minima / altezza massima.

Absolute-Center.is-Responsive (larghezza: 60%; altezza: 60%; larghezza minima: 400 px; larghezza massima: 500 px; padding: 40 px; overflow: auto; margine: auto; posizione: assoluta; top: 0; sinistra: 0; fondo: 0; destra: 0;)

offset

Se il sito ha un'intestazione fissa o devi fare qualche altro rientro, devi solo aggiungere codice come in alto: 70px; mentre impostato margine: automatico; il blocco di contenuto sarà centrato correttamente in altezza.

Puoi anche allineare il contenuto al lato desiderato, lasciando il centraggio in altezza. Per fare ciò, è necessario utilizzare destra: 0; a sinistra: automatico; per allineare a destra, o sinistra: 0; a destra: automatico; per allineare a sinistra.

Absolute-Center.is-Right (larghezza: 50%; altezza: 50%; margine: auto; overflow: auto; posizione: assoluta; in alto: 0; a sinistra: auto; in basso: 0; a destra: 20 px; allineamento del testo: Giusto;)

Tanti contenuti

Affinché una grande quantità di contenuti non permetta la dispersione del layout, utilizziamo overflow: auto... Apparirà lo scorrimento verticale. Puoi anche aggiungere altezza massima: 100%; se il contenuto non ha imbottitura extra.
.Absolute-Center.is-Overflow (larghezza: 50%; altezza: 300 px; altezza massima: 100%; margine: auto; overflow: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra : 0;)

immagini

Il metodo funziona benissimo anche per le immagini! Aggiungi stile altezza: automatica; quindi l'immagine verrà ridimensionata con il contenitore.

Absolute-Center.is-Image (larghezza: 50%; altezza: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

Altezza variabile

Il metodo descritto richiede una data altezza del blocco, che può essere specificata come percentuale e controllata utilizzando altezza massima il che rende il metodo ideale per i siti responsive. Un modo per non impostare l'altezza è usare display: tabella... In questo caso, il blocco di contenuto è centrato indipendentemente dalle sue dimensioni.

Potrebbero esserci problemi con la compatibilità tra browser, forse dovresti usare il metodo table-cell (descritto di seguito).

• Firefox/IE8: utilizzo display: tabella Allinea il blocco verticalmente alla parte superiore del documento.
• IE9 / 10: utilizzo display: tabella allinea il blocco a sinistra angolo in alto pagine.
• Safari mobile: se la larghezza è data in percentuale, il centraggio orizzontale ne risente

.Absolute-Center.is-Variable (visualizzazione: tabella; larghezza: 50%; overflow: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

altri metodi

Il metodo descritto funziona alla grande nella maggior parte dei casi, ma ci sono altri metodi che possono essere applicati per risolvere problemi specifici.

Margine negativo

Probabilmente il più modo popolare... Adatto se si conoscono le dimensioni del blocco.

È negativo (larghezza: 300 px; altezza: 200 px; riempimento: 20 px; posizione: assoluta; superiore: 50%; sinistra: 50%; margine sinistro: -170 px; / * (larghezza + riempimento) / 2 * / margine- in alto: -120px; / * (altezza + imbottitura) / 2 * /)
vantaggi:

• Compatibilità tra browser
• Codice minimo

Screpolatura:

• Non adattivo
• Il layout si insinua se c'è troppo contenuto nel contenitore
• Devo compensare l'imbottitura o l'uso dimensione della scatola: bordo-scatola

Usando la trasformazione

Uno dei più modi semplici, supporta il cambio di altezza. C'è un articolo dettagliato su questo argomento - "Centraggio degli elementi in percentuale larghezza/altezza" di CSS-Tricks.

Is-Transformed (larghezza: 50%; margine: auto; posizione: assoluta; top: 50%; sinistra: 50%; -webkit-transform: translate (-50%, - 50%); -ms-transform: translate ( -50%, - 50%); trasforma: traduci (-50%, - 50%);)
vantaggi:

• Altezza variabile
• Codice minimo

Screpolatura:

• Non funziona in IE 8
• Uso dei prefissi
• Può interferire con altri effetti con trasformare
• In alcuni casi, durante il rendering, i bordi del blocco e il testo sono sfocati

Cella-tabella

Forse uno dei modi migliori e più semplici. Descritto in dettaglio nell'articolo "Centraggio verticale ad altezza flessibile con CSS, oltre IE7" di 456beeastreet. Lo svantaggio principale è il markup aggiuntivo: sono necessari tre elementi:

CSS:
.Pos-Container.is-Table (display: table;) .is-Table .Table-Cell (display: table-cell; vertical-align: middle;) .is-Table .Center-Block (larghezza: 50%; margine: 0 automatico;)
vantaggi:

• Altezza variabile
• Il layout non funziona quando un largo numero testo in un blocco
• Compatibilità tra browser

Screpolatura:

• struttura complessa

Flexbox

Il futuro dei CSS, flexbox risolverà molti dei problemi di layout odierni. Per maggiori dettagli, vedere l'articolo Centering Elements with Flexbox di Smashing Magazine.

Pos-Container.is-Flexbox (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: centro; -webkit-justify-content: centro; giustifica-contenuto: centro;)
vantaggi:

• Il contenuto può essere di qualsiasi altezza o larghezza
• Può essere utilizzato in casi più complessi

Screpolatura:

• Nessun supporto per Internet Explorer 8-9
• Richiede contenitore o stili nel corpo
• Richiede un'ampia varietà di prefissi per lavoro corretto nei browser moderni
• Potenziali problemi di prestazioni

Risultato

Ogni metodo ha vantaggi e svantaggi. Fondamentalmente, la scelta si riduce alla scelta dei browser che dovrebbero essere supportati

Quante copie sono già state rotte sull'attività di allineamento degli elementi sulla pagina. Ecco una traduzione dell'eccellente articolo di Stephen Shaw sulla risoluzione di questo problema per Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Lo sapevamo tutti margine: 0 automatico; per centraggio orizzontale, ma margine: automatico; non ha funzionato per il verticale. Questo può essere facilmente risolto impostando semplicemente l'altezza e applicando i seguenti stili:

Absolute-Center (margine: auto; posizione: assoluto; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)
Non sono il primo a suggerire questa soluzione, ma questo approccio è usato raramente con l'allineamento verticale. Nei commenti su Come centrare qualsiasi cosa con i CSS, Simon si collega a un jsFiddle per un'ottima soluzione per il centraggio verticale. Eccone altri su questo argomento.

Diamo un'occhiata più da vicino al metodo.

Dignità

• Compatibile con più browser (incluso IE 8-10)
• Nessun markup aggiuntivo, stili minimi
• Adattabilità
• Indipendenza da imbottitura(privo di dimensionamento della scatola!)
• Funziona per le immagini

Screpolatura

• L'altezza deve essere specificata (vedi Altezza variabile)
• Si consiglia di chiedere overflow: auto in modo che il contenuto non si insinui
• Non funziona su Windows Phone

Compatibilità del browser

Il metodo è stato testato e funziona alla grande in Chrome, Firefox, Safari, Mobile Safari e persino IE 8-10. Un utente ha affermato che il contenuto non è allineato verticalmente su Windows Phone.

All'interno del contenitore

Contenuto inserito in un contenitore con posizione: relativa si allineerà perfettamente:

Absolute-Center (larghezza: 50%; altezza: 50%; overflow: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

Utilizzo della vista

Imposta il contenuto su position: fixed e imposta lo z-index:

Absolute-Center.is-Fixed (larghezza: 50%; altezza: 50%; overflow: auto; margine: auto; posizione: fissa; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0; z-index: 999;)

Adattabilità

Il vantaggio principale del metodo descritto è un lavoro eccellente quando l'altezza o la larghezza è data in percentuale e persino la comprensione larghezza minima / larghezza massima e altezza minima / altezza massima.

Absolute-Center.is-Responsive (larghezza: 60%; altezza: 60%; larghezza minima: 400 px; larghezza massima: 500 px; padding: 40 px; overflow: auto; margine: auto; posizione: assoluta; top: 0; sinistra: 0; fondo: 0; destra: 0;)

offset

Se il sito ha un'intestazione fissa o devi fare qualche altro rientro, devi solo aggiungere codice come in alto: 70px; mentre impostato margine: automatico; il blocco di contenuto sarà centrato correttamente in altezza.

Puoi anche allineare il contenuto al lato desiderato, lasciando il centraggio in altezza. Per fare ciò, è necessario utilizzare destra: 0; a sinistra: automatico; per allineare a destra, o sinistra: 0; a destra: automatico; per allineare a sinistra.

Absolute-Center.is-Right (larghezza: 50%; altezza: 50%; margine: auto; overflow: auto; posizione: assoluta; in alto: 0; a sinistra: auto; in basso: 0; a destra: 20 px; allineamento del testo: Giusto;)

Tanti contenuti

Affinché una grande quantità di contenuti non permetta la dispersione del layout, utilizziamo overflow: auto... Apparirà lo scorrimento verticale. Puoi anche aggiungere altezza massima: 100%; se il contenuto non ha imbottitura extra.
.Absolute-Center.is-Overflow (larghezza: 50%; altezza: 300 px; altezza massima: 100%; margine: auto; overflow: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra : 0;)

immagini

Il metodo funziona benissimo anche per le immagini! Aggiungi stile altezza: automatica; quindi l'immagine verrà ridimensionata con il contenitore.

Absolute-Center.is-Image (larghezza: 50%; altezza: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

Altezza variabile

Il metodo descritto richiede una data altezza del blocco, che può essere specificata come percentuale e controllata utilizzando altezza massima il che rende il metodo ideale per i siti responsive. Un modo per non impostare l'altezza è usare display: tabella... In questo caso, il blocco di contenuto è centrato indipendentemente dalle sue dimensioni.

Potrebbero esserci problemi con la compatibilità tra browser, forse dovresti usare il metodo table-cell (descritto di seguito).

• Firefox/IE8: utilizzo display: tabella Allinea il blocco verticalmente alla parte superiore del documento.
• IE9 / 10: utilizzo display: tabella allinea il blocco all'angolo superiore sinistro della pagina.
• Safari mobile: se la larghezza è data in percentuale, il centraggio orizzontale ne risente

.Absolute-Center.is-Variable (visualizzazione: tabella; larghezza: 50%; overflow: auto; margine: auto; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; a destra: 0;)

altri metodi

Il metodo descritto funziona alla grande nella maggior parte dei casi, ma ci sono altri metodi che possono essere applicati per risolvere problemi specifici.

Margine negativo

Probabilmente il modo più popolare. Adatto se si conoscono le dimensioni del blocco.

È negativo (larghezza: 300 px; altezza: 200 px; riempimento: 20 px; posizione: assoluta; superiore: 50%; sinistra: 50%; margine sinistro: -170 px; / * (larghezza + riempimento) / 2 * / margine- in alto: -120px; / * (altezza + imbottitura) / 2 * /)
vantaggi:

• Compatibilità tra browser
• Codice minimo

Screpolatura:

• Non adattivo
• Il layout si insinua se c'è troppo contenuto nel contenitore
• Devo compensare l'imbottitura o l'uso dimensione della scatola: bordo-scatola

Usando la trasformazione

Uno dei modi più semplici, supporta il cambio di altezza. C'è un articolo dettagliato su questo argomento - "Centraggio degli elementi in percentuale larghezza/altezza" di CSS-Tricks.

Is-Transformed (larghezza: 50%; margine: auto; posizione: assoluta; top: 50%; sinistra: 50%; -webkit-transform: translate (-50%, - 50%); -ms-transform: translate ( -50%, - 50%); trasforma: traduci (-50%, - 50%);)
vantaggi:

• Altezza variabile
• Codice minimo

Screpolatura:

• Non funziona in IE 8
• Uso dei prefissi
• Può interferire con altri effetti con trasformare
• In alcuni casi, durante il rendering, i bordi del blocco e il testo sono sfocati

Cella-tabella

Forse uno dei modi migliori e più semplici. Descritto in dettaglio nell'articolo "Centraggio verticale ad altezza flessibile con CSS, oltre IE7" di 456beeastreet. Lo svantaggio principale è il markup aggiuntivo: sono necessari tre elementi:

CSS:
.Pos-Container.is-Table (display: table;) .is-Table .Table-Cell (display: table-cell; vertical-align: middle;) .is-Table .Center-Block (larghezza: 50%; margine: 0 automatico;)
vantaggi:

• Altezza variabile
• Il layout non funziona con una grande quantità di testo nel blocco
• Compatibilità tra browser

Screpolatura:

• struttura complessa

Flexbox

Il futuro dei CSS, flexbox risolverà molti dei problemi di layout odierni. Per maggiori dettagli, vedere l'articolo Centering Elements with Flexbox di Smashing Magazine.

Pos-Container.is-Flexbox (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: centro; -webkit-justify-content: centro; giustifica-contenuto: centro;)
vantaggi:

• Il contenuto può essere di qualsiasi altezza o larghezza
• Può essere utilizzato in casi più complessi

Screpolatura:

• Nessun supporto per Internet Explorer 8-9
• Richiede contenitore o stili nel corpo
• Richiede un'ampia varietà di prefissi per funzionare correttamente nei browser moderni
• Potenziali problemi di prestazioni

Risultato

Ogni metodo ha vantaggi e svantaggi. Fondamentalmente, la scelta si riduce alla scelta dei browser che dovrebbero essere supportati

Nel processo di layout delle pagine Web, il compito di centrare i blocchi è abbastanza comune. Questo può essere sia centraggio verticale che orizzontale.

Ad esempio, se il sito ha larghezza fissa, allora sarebbe razionale allinearlo al centro della finestra del browser, poiché questo rende il testo più leggibile (soprattutto se il monitor è grande). Alcuni design generalmente presuppongono la posizione del blocco al centro della finestra del browser, cioè contemporaneamente centratura verticale e orizzontale.

Innanzitutto, parliamo di centraggio orizzontale. La tecnica più popolare è quando il blocco viene centrato impostando le dimensioni destra e sinistra. margine su "auto"... Supponiamo di voler centrare un blocco con id = "contenitore" di 860 px di larghezza. In questo caso, in File CSS devi scrivere:

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

Tuttavia, I.E. le versioni precedenti (5.0 per esempio) non centrano questo blocco. Certo, nessuno usa più browser così antichi (su 1800 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 è tag CORPO), è necessario impostare il parametro allineamento del testo: centro... In questo caso, il blocco sarà allineato al centro, tuttavia, anche tutti i suoi contenuti saranno allineati al centro e non ne abbiamo bisogno. Pertanto, all'interno di questo blocco impostiamo l'allineamento predefinito - allineamento del testo: a sinistra .

body (text-align: center)

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

C'è anche un altro modo allineamento orizzontale blocco basato su. Come probabilmente saprai, per impostazione predefinita, qualsiasi elemento a livello di blocco si aggancia al 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 un margine negativo, spostalo a sinistra di una distanza pari alla metà della larghezza del blocco.

Questo posizionerà il blocco al centro. Per maggiore chiarezza, guarda 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 relativo alla finestra del browser, ma, ad esempio, relativo a un altro blocco, allora per questo altro blocco è necessario impostare posizione: relativa;

Supponiamo che il nostro blocco #contenitore che deve essere centrato si trovi all'interno di un blocco #wrap. Quindi il codice sarà simile a questo:

#wrap (posizione: relativo)

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

Ora diamo un'occhiata al caso in cui è necessario allineare un blocco al centro della pagina, ad es. applicare contemporaneamente il centraggio orizzontale e verticale. Anche in questo caso, il posizionamento è applicabile. Quindi abbiamo bisogno di:

1. Imposta per bloccare posizionamento assoluto

2. Spostalo a destra del 50% e in basso del 50%, posizionando così l'angolo in alto a sinistra al centro della finestra del browser.

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

Questo metterà il blocco al centro della pagina web.

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

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

Spero che il principio stesso ti sia chiaro.

Vota lezione: 1 2 3 4 5

Commenti:

Sarò il primo a guardare la lezione!!!

Eh ... Secondo =) Di recente ho riscontrato questo problema in IE, ho sofferto a lungo)) Grazie =)

Grazie, pagina aggiunta ai segnalibri)))

Grazie mille, Andrey, per le nuove lezioni!

Solo grazie, penso che non ci sia nulla da aggiungere qui))

Grazie per la lezione, solo un paio di giorni fa ho provato a farlo, sofferto un po' e momentaneamente rimandato

E ho un problema: il sito in Mozille Firefox non si vuole allineare, si è bloccato sul bordo sinistro e basta, nessuno dei precedenti aiuta (lo stesso in Opera).

perchè non funziona? - "se vuoi posizionare il blocco non rispetto alla finestra del browser, ma, ad esempio, rispetto ad un altro blocco, allora per quest'altro blocco devi impostare position: relative;"

Grazie mille !! solo GIGANTE grazie! Che Dio ti dia salute!

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

Andrey, aggiungi una ricerca sul sito.

Aggiungi un commento.