Come allineare il testo al centro, alla larghezza e ai bordi della pagina in HTML? Allineamento orizzontale e verticale degli elementi

Oggi, caro lettore, affronteremo il problema dell'allineamento verticale in un blocco div.

Molto probabilmente sai già dell'esistenza di una meravigliosa proprietà CSS allineamento verticale. E Dio stesso ci ha ordinato di utilizzare proprio questa proprietà per l'allineamento verticale (non per niente ha un nome così autoesplicativo).

Formulazione del problema:È necessario centrare il contenuto di un blocco ad altezza variabile rispetto alla verticale.

Ora iniziamo a risolvere il problema.

E quindi, abbiamo un blocco, la sua altezza può cambiare:

La prima cosa che mi viene in mente è fare la seguente finta:

Ci sono tutte le ragioni per credere che la frase Blocca il contenuto sarà allineato all'altezza centrale del contenitore div.

Ma non c'era! In questo modo non otterremo alcun allineamento centrale previsto. E perché? Sembrerebbe che tutto sia indicato correttamente. Si scopre che questo è il problema: la proprietà allineamento verticale può essere utilizzato solo per allineare il contenuto delle celle della tabella o per allineare gli elementi in linea l'uno rispetto all'altro.

Per quanto riguarda l'allineamento all'interno della cella di una tabella, penso che tutto sia chiaro. Ma spiegherò un altro caso con elementi in linea.

Allineamento verticale degli elementi in linea

Supponiamo di avere una riga di testo suddivisa da tag di riga in parti:

Voi accoglie pezzo testo!

Un tag in linea è un contenitore il cui aspetto non fa sì che il contenuto vada a capo su una nuova riga.

L'azione del tag block fa sì che il contenuto del contenitore vada a capo su una nuova riga.

è un tag di blocco. Se racchiudiamo pezzi di testo in blocchi

, quindi ognuno di essi sarà su una nuova riga. Utilizzando l'etichetta , che, a differenza

, è minuscolo, i contenitori non verranno spostati in una nuova riga, tutti i contenitori resterà sulla stessa linea.

Contenitore comodo da usare quando si specifica una parte del testo con formattazione speciale (evidenziandola con un colore, un font diverso, ecc.)

Per contenitori Applica le seguenti proprietà CSS:

#perviy( allineamento verticale:sub; ) #vtoroy( allineamento verticale:3px; ) #tretiy( allineamento verticale:-3px; )

La riga di testo risultante sarà simile a questa:

Questo non è altro che l'allineamento verticale degli elementi in linea e la proprietà CSS allineamento verticale affronta perfettamente questo compito.

Ci siamo distratti un po', ora torniamo al nostro compito principale.

Allineamento verticale nel contenitore div

Non importa cosa, per l'allineamento all'interno del contenitore div utilizzeremo la proprietà allineamento verticale. Come ho già detto, questa proprietà può essere utilizzata nel caso di allineamento di elementi in linea (abbiamo discusso questo caso in dettaglio sopra e non è adatto a noi per l'allineamento in un contenitore div); non resta che sfruttare il fatto allineamento verticale funziona per le celle della tabella.

Come possiamo usarlo? Non abbiamo una tabella, lavoriamo con un contenitore div.

Ah, risulta essere molto semplice.

Proprietà CSS Schermo ti permette di trasformare il nostro blocco div in una cella di tabella, questo può essere fatto facilmente e naturalmente:

Diciamo che abbiamo un div di classe allineamento testo:

Per questo blocco specifichiamo la seguente proprietà CSS:

Textalign( display: tabella-cella; )

Questa istruzione CSS trasformerà miracolosamente il nostro div in una cella di tabella senza modificarlo visivamente in alcun modo. E per una cella di tabella possiamo applicare la proprietà allineamento verticale completamente e l'allineamento verticale desiderato funzionerà.

Tuttavia, tutto non può finire così semplicemente. Abbiamo un meraviglioso browser IE. Non sa come lavorare con la proprietà visualizzazione: cella-tabella(Ti suggerisco di leggere la tabella che illustra la funzionalità di questa proprietà CSS nei diversi browser sul sito htmlbook.ru). Pertanto, dovremo ricorrere a vari trucchi.

Esistono molti modi per ottenere l'allineamento in un contenitore div per tutti i browser:

• Metodo che utilizza un contenitore div ausiliario aggiuntivo
• Metodo che utilizza l'espressione. È collegato a un complicato calcolo dell'altezza dei blocchi. Non puoi farlo senza la conoscenza di JavaScript.
• Utilizzando la proprietà line-height. Questo metodo è adatto solo per l'allineamento verticale in un blocco di altezza nota e pertanto non è applicabile nel caso generale.
• Utilizzo dell'offset del contenuto assoluto e relativo in caso di browser IE. Questo metodo mi sembra il più comprensibile e semplice. Inoltre, è implementabile per un contenitore div ad altezza variabile. Ci soffermeremo su questo in modo più dettagliato.

Come hai capito, dobbiamo solo risolvere il problema dell'allineamento verticale in IE associato alla sua incomprensione della proprietà visualizzazione: cella-tabella(né IE6, né IE7, né IE8 non conosco questa struttura). Pertanto, utilizzando commento condizionale Specificheremo diverse proprietà CSS specificatamente per i browser IE.

Commento condizionale

Tipologia costruttiva:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

si chiama commento condizionale (attenzione, il tipo di commento condizionale deve corrispondere completamente a quello dell'esempio riportato, fino ad uno spazio).

Le istruzioni contenute in tale commento condizionale verranno eseguite solo se il browser che interpreta questo codice appartiene alla famiglia IE.

Pertanto, utilizzando un commento condizionale, possiamo nascondere una parte di codice da tutti i browser tranne IE.

La soluzione del problema

A causa di tutto questo prezzemolo, dovremo fornire al nostro codice HTML due contenitori aggiuntivi. Ecco come apparirà il nostro blocco di testo:

Per la classe contenitore div textalign Sono impostate le proprietà CSS che allineano il suo contenuto verticalmente per tutti i normali browser (eccetto IE, ovviamente):

Visualizzazione: tabella-cella; allineamento verticale: medio;

E altre due proprietà che impostano la larghezza e l'altezza del blocco:

Larghezza:500px; altezza: 500px;

Questo è abbastanza per allineare il contenuto del contenitore centrato rispetto alla verticale, in tutti i browser tranne IE.

Ora iniziamo ad aggiungere proprietà relative all'allineamento per i browser della famiglia IE(è per loro che abbiamo utilizzato blocchi aggiuntivi div E arco):

Riferendosi all'etichetta div all'interno di un blocco di classe textalign. Per fare ciò è necessario indicare prima il nome della classe e poi, separato da uno spazio, il tag a cui stiamo accedendo.

Textalign div(posizione: assoluta; superiore: 50%;)

Questo design significa: per tutti i tag div all'interno di un blocco con una classe textalign applicare le proprietà elencate.

Di conseguenza, gli stili specificati per il blocco textalign sono modificati:

Textalign( display: table-cell; vertical-align: middle; larghezza: 500px; altezza: 500px; posizione: relativa; )

Ora il punto in alto a sinistra del blocco di testo viene spostato verso il basso del 50%.

Per spiegare cosa sta succedendo, ho disegnato un'illustrazione:

Come potete vedere dalla foto, abbiamo fatto dei progressi. Ma non è tutto! Il punto in alto a sinistra del blocco giallo si è infatti spostato del 50% verso il basso, rispetto al blocco genitore (viola). Ma abbiamo bisogno che sia al cinquanta per cento dell'altezza del blocco viola. centro del blocco giallo, non il suo punto in alto a sinistra.

Ora entrerà in gioco il tag arco e il relativo posizionamento:

Textalign span( posizione: relativa; superiore: -50%; )

Pertanto, abbiamo spostato il blocco giallo verso l'alto del 50% della sua altezza, rispetto alla sua posizione iniziale. Come hai capito, l'altezza del blocco giallo è uguale all'altezza del contenuto centrato. E l'ultima operazione sul contenitore span ha posizionato il nostro contenuto al centro del blocco viola. Evviva!

Imbrogliamo un po'

Prima di tutto dobbiamo nascondere Prezzemolo a tutti i normali browser e aprirlo per IE. Questo può essere fatto, ovviamente, utilizzando un commento condizionale; non per niente lo abbiamo conosciuto:

C'è un piccolo problema. Se il contenuto centrato è troppo alto, ciò porta a conseguenze spiacevoli: c'è un'altezza extra per lo scorrimento verticale.

Soluzione al problema:è necessario aggiungere una proprietà overflow: nascosto bloccare textalign.

Conosci l'immobile nel dettaglio traboccare possibile nel.

Le istruzioni CSS finali per il blocco textalign ha la forma:

Textalign( display: table-cell; vertical-align: middle; larghezza: 500px; altezza: 500px; posizione: relativa; overflow: nascosto; bordo: 1px nero pieno; )

Mi dispiace, ho dimenticato di menzionare un punto importante. Se provi imposta l'altezza del blocco di classe textalign in percentuale, allora hai niente funzionerà.

Centraggio nel blocco ad altezza variabile

Molto spesso è necessario impostare l'altezza del blocco di una classe textalign non in pixel, ma come percentuale dell'altezza del blocco genitore e allinea il contenuto del contenitore div al centro.

Il problema è che è impossibile farlo per una cella di tabella (ma la classe block textalign si trasforma esattamente in una cella di tabella, grazie alla proprietà display:cella-tabella).

In questo caso è necessario utilizzare un blocco esterno per il quale è specificata la proprietà CSS visualizzazione:tabella e ho già impostato il valore percentuale dell'altezza per esso. Quindi il blocco si è annidato al suo interno, con la direttiva CSS display:cella-tabella, erediterà felicemente l'altezza del blocco genitore.

Per implementare un blocco ad altezza variabile nel nostro esempio, modificheremo leggermente il CSS:

Alla classe textalign modificheremo il valore della proprietà Schermo Con cella della tabella SU tavolo e rimuovere la direttiva di allineamento allineamento verticale: medio. Ora possiamo tranquillamente modificare il valore dell'altezza da 500 pixel, ad esempio, al 100%.

Quindi le proprietà CSS per il blocco della classe textalign sarà simile a questo:

Textalign( display: tabella; larghezza: 500px; altezza: 100%; posizione: relativa; overflow: nascosto; bordo: 1px nero pieno; )

Non resta che implementare la centratura dei contenuti. Per fare ciò, un contenitore div annidato in un blocco di classe textalign(questo è lo stesso blocco giallo nell'immagine), è necessario impostare la proprietà CSS display:cella-tabella, erediterà l'altezza del 100% dal blocco genitore textalign(blocco viola). E nulla ci impedirà di allineare il contenuto del contenitore div nidificato al centro con la proprietà allineamento verticale: medio.

Otteniamo un altro elenco aggiuntivo di proprietà CSS per il blocco div annidato nel contenitore textalign.

Textalign div( display: table-cell; vertical-align: middle; )

Questo è il trucco. Se lo desideri, puoi avere un'altezza variabile con il contenuto centrato.

Per ulteriori informazioni sull'allineamento verticale di un blocco ad altezza variabile, vedere .

Centrare gli elementi verticalmente utilizzando i CSS è un compito che presenta qualche difficoltà per gli sviluppatori. Tuttavia, esistono diversi metodi per risolverlo, che sono abbastanza semplici. Questa lezione presenta 6 opzioni per centrare verticalmente il contenuto.

Cominciamo con una descrizione generale del problema.

Problema di centratura verticale

Il centraggio orizzontale è molto semplice e facile. Quando l'elemento centrato è in linea, utilizziamo la proprietà di allineamento relativa all'elemento genitore. Quando l'elemento è a livello di blocco, ne impostiamo la larghezza e l'impostazione automatica dei margini sinistro e destro.

La maggior parte delle persone, quando utilizza la proprietà text-align:, fa riferimento alla proprietà vertical-align per la centratura verticale. Tutto sembra abbastanza logico. Se hai utilizzato modelli di tabella, probabilmente hai fatto ampio uso dell'attributo valign, che rafforza la convinzione che l'allineamento verticale sia il modo giusto per risolvere il problema.

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

Il valore della proprietà vertical-align è relativo all'elemento inline genitore.

• In una riga di testo, l'allineamento è relativo all'altezza della riga.
• La cella della tabella utilizza l'allineamento rispetto a un valore calcolato da uno speciale algoritmo (solitamente l'altezza della riga).

Ma sfortunatamente, la proprietà vertical-align non funziona su elementi a livello di blocco (ad esempio, paragrafi all'interno di un elemento div). Questa situazione può portare a pensare che non esista soluzione al problema dell'allineamento verticale.

Ma esistono altri metodi per centrare gli elementi del blocco, la cui scelta dipende da cosa viene centrato rispetto al contenitore esterno.

Metodo dell'altezza della linea

Questo metodo funziona quando desideri centrare verticalmente una riga di testo. Tutto quello che devi fare è impostare l'altezza della linea in modo che sia maggiore della dimensione del carattere.

Per impostazione predefinita, lo spazio bianco verrà distribuito uniformemente nella parte superiore e inferiore del testo. E la linea sarà centrata verticalmente. Spesso l'altezza della linea è uguale all'altezza dell'elemento.

HTML:

CSS:

#child (altezza della linea: 200px;)

Questo metodo funziona con tutti i browser, anche se può essere utilizzato solo per una riga. Il valore 200 px nell'esempio è stato scelto arbitrariamente. È possibile utilizzare qualsiasi valore maggiore della dimensione del carattere del testo.

Centrare un'immagine utilizzando l'altezza della linea

Cosa succede se il contenuto è un'immagine? Il metodo sopra funzionerà? La risposta si trova in un'altra riga di codice CSS.

HTML:

CSS:

#parent (altezza della linea: 200px;) #parent img (allineamento verticale: centro;)

Il valore della proprietà line-height deve essere maggiore dell'altezza dell'immagine.

Metodo della tabella CSS

È stato menzionato in precedenza che la proprietà di allineamento verticale viene utilizzata per le celle della tabella, dove funziona benissimo. Possiamo visualizzare il nostro elemento come cella di tabella e utilizzare la proprietà di allineamento verticale su di esso per centrare verticalmente il contenuto.

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

HTML:

CSS:

#parent (visualizzazione: tabella;) #child (visualizzazione: tabella-cella; allineamento verticale: centro;)

Impostiamo l'output della tabella sull'elemento div genitore e restituiamo l'elemento div annidato come cella della tabella. Ora puoi utilizzare la proprietà di allineamento verticale sul contenitore interno. Tutto al suo interno sarà centrato verticalmente.

A differenza del metodo sopra, in questo caso il contenuto può essere dinamico poiché l'elemento div cambierà dimensione in base al suo contenuto.

Lo svantaggio di questo metodo è che non funziona nelle versioni precedenti di IE. È necessario utilizzare la proprietà display: inline-block per il contenitore nidificato.

Posizionamento assoluto e margini negativi

Questo metodo funziona anche in tutti i browser. Ma è necessario che all'elemento centrato venga assegnata un'altezza.

Il codice di esempio esegue la centratura orizzontale e verticale contemporaneamente:

HTML:

CSS:

#genitore (posizione: relativa;) #figlio ( posizione: assoluta; superiore: 50%; sinistra: 50%; altezza: 30%; larghezza: 50%; margine: -15% 0 0 -25%; )

Per prima cosa impostiamo il tipo di posizionamento dell'elemento. Successivamente, impostiamo le proprietà top e left dell'elemento div nidificato al 50%, che corrisponde al centro dell'elemento genitore. Ma il centro è l'angolo in alto a sinistra dell'elemento nidificato. Pertanto, è necessario sollevarlo (metà dell'altezza) e spostarlo a sinistra (metà della larghezza), quindi il centro coinciderà con il centro dell'elemento genitore. Quindi in questo caso è necessario conoscere l'altezza dell'elemento. Quindi impostiamo l'elemento con i margini superiore e sinistro negativi pari rispettivamente alla metà dell'altezza e della larghezza.

Questo metodo non funziona in tutti i browser.

Posizionamento e stretching assoluto

Il codice di esempio esegue il centraggio verticale e orizzontale.

HTML:

CSS:

#parent (posizione: relativa;) #child (posizione: assoluta; alto: 0; basso: 0; sinistra: 0; destra: 0; larghezza: 50%; altezza: 30%; margine: automatico; )

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

L'impostazione dei margini per la generazione automatica su tutti i lati imposterà valori uguali su tutti e 4 i lati e centrerà il nostro elemento div nidificato sul suo elemento genitore.

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

Spazi uguali sopra e sotto

In questo metodo, il riempimento uguale viene impostato esplicitamente sopra e sotto l'elemento genitore.

HTML:

CSS:

#parent (imbottitura: 5% 0;) #child (imbottitura: 10% 0;)

Il codice CSS di esempio imposta il riempimento superiore e inferiore per entrambi gli elementi. Per un elemento nidificato, l'impostazione del riempimento servirà a centrarlo verticalmente. E il riempimento dell'elemento genitore centrerà l'elemento nidificato al suo interno.

Le unità di misura relative vengono utilizzate per ridimensionare dinamicamente gli elementi. E per le unità di misura assolute dovrai fare calcoli.

Ad esempio, se l'elemento genitore ha un'altezza di 400 px e l'elemento nidificato è di 100 px, saranno necessari 150 px di riempimento in alto e in basso.

150 + 150 + 100 = 400

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

Questo metodo funziona ovunque. Lo svantaggio è la necessità di calcoli.

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

div. galleggiante

Questo metodo utilizza un elemento div vuoto che fluttua e aiuta a controllare la posizione del nostro elemento nidificato nel documento. Tieni presente che il div mobile viene posizionato prima del nostro elemento nidificato nel codice HTML.

HTML:

CSS:

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

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

Poiché questo div è mobile, viene rimosso dal normale flusso del documento e dobbiamo scartare il testo sull'elemento nidificato. L'esempio utilizza clear: Both , ma è più che sufficiente utilizzare la stessa direzione dell'offset dell'elemento div vuoto mobile.

Il bordo superiore di un elemento div nidificato è direttamente sotto il bordo inferiore di un elemento div vuoto. Dobbiamo spostare l'elemento nidificato verso l'alto della metà dell'altezza dell'elemento vuoto mobile. Per risolvere il problema, utilizzare un valore della proprietà margin-bottom negativo per un elemento div vuoto mobile.

Questo metodo funziona anche in tutti i browser. Tuttavia, il suo utilizzo richiede un elemento div vuoto aggiuntivo e la conoscenza dell'altezza dell'elemento nidificato.

Conclusione

Tutti i metodi descritti sono facili da usare. La difficoltà è che nessuno di essi è adatto a tutti i casi. È necessario analizzare il progetto e scegliere quello che meglio si adatta alle esigenze.

Vlad Merzhevich

Poiché il contenuto delle celle della tabella può essere allineato contemporaneamente orizzontalmente e verticalmente, vengono ampliate le possibilità di controllo della posizione degli elementi l'uno rispetto all'altro. Le tabelle ti consentono di impostare l'allineamento di immagini, testo, campi modulo e altri elementi tra loro e rispetto alla pagina web nel suo complesso. In generale, l'allineamento è necessario soprattutto per stabilire connessioni visive tra diversi elementi, nonché per raggrupparli insieme.

Centratura verticale

Un modo per mostrare al visitatore il focus e il nome del sito è utilizzare una splash page. Questa è la prima pagina su cui, di regola, è presente una schermata iniziale flash o un'immagine che esprime l'idea principale del sito. L'immagine è anche un collegamento ad altre sezioni del sito. Devi posizionare questa immagine al centro della finestra del browser, indipendentemente dalla risoluzione del monitor. A questo scopo è possibile utilizzare una tabella con larghezza e altezza pari al 100% (esempio 1).

Esempio 1: Centrare il disegno

In questo esempio, l'allineamento orizzontale viene impostato utilizzando il parametro del tag align="center". e il contenuto della cella potrebbe non essere centrato verticalmente, poiché questa è la posizione predefinita.

Per impostare l'altezza del tavolo al 100%, è necessario rimuovere, il codice cessa di essere valido.

L'utilizzo della larghezza e dell'altezza per coprire l'intera area disponibile della pagina web garantisce che il contenuto della tabella sarà allineato esattamente al centro della finestra del browser, indipendentemente dalle sue dimensioni.

Allineamento orizzontale

Combinando gli attributi align (allineamento orizzontale) e valign (allineamento verticale) del tag , è consentito impostare diversi tipi di posizioni degli elementi l'uno rispetto all'altro. Nella fig. La Figura 1 mostra i modi per allineare gli elementi orizzontalmente.

Diamo un'occhiata ad alcuni esempi di allineamento del testo secondo la figura seguente.

Allineamento superiore

Per specificare l'allineamento superiore del contenuto della cella, per un tag è necessario impostare l'attributo valign con il valore top (esempio 2).

Esempio 2: utilizzo di valign

In questo esempio, le caratteristiche della cella vengono controllate utilizzando i parametri del tag , ma è anche più conveniente cambiare gli stili. In particolare, l'allineamento nelle celle è specificato dalle proprietà vertical-align e text-align (esempio 3).

Esempio 3: applicazione degli stili per l'allineamento

Per abbreviare il codice, in questo esempio viene utilizzato il raggruppamento di selettori poiché le proprietà di allineamento verticale e di riempimento vengono applicate a due celle contemporaneamente.

L'allineamento inferiore viene eseguito allo stesso modo, ma invece del valore superiore viene utilizzato il valore inferiore.

Allineamento centrale

Per impostazione predefinita, il contenuto delle celle è allineato al centro della linea verticale, quindi se le colonne hanno altezze diverse, è necessario impostare l'allineamento al bordo superiore. A volte è ancora necessario abbandonare il metodo di allineamento originale, ad esempio quando si inseriscono le formule, come mostrato in Fig. 2.

In questo caso, la formula si trova rigorosamente al centro della finestra del browser e il suo numero si trova sul bordo destro. Per disporre gli elementi in questo modo, avrai bisogno di una tabella con tre celle. Le celle esterne dovrebbero avere le stesse dimensioni, nella cella centrale l'allineamento è centrato e nella cella destra - lungo il bordo destro (esempio 4). Questo numero di celle è necessario per garantire che la formula sia posizionata al centro.

Esempio 4: allineamento della formula

(18.6)

In questo esempio, la prima cella della tabella viene lasciata vuota; serve solo per creare un rientro, che tra l'altro può essere impostato anche utilizzando gli stili.

Allineamento degli elementi del modulo

Utilizzando le tabelle, è conveniente determinare la posizione dei campi del modulo, soprattutto quando sono intervallati da testo. Una delle opzioni di progettazione del modulo, destinato all'inserimento di un commento, è mostrata in Fig. 3.

Per garantire che il testo accanto ai campi del modulo sia allineato a destra e che gli elementi del modulo siano allineati a sinistra, avrai bisogno di una tabella con un bordo invisibile e due colonne. La colonna di sinistra conterrà il testo stesso e la colonna di destra conterrà i campi di testo (esempio 5).

Esempio 5: allineamento dei campi del modulo

In questo esempio, per quelle celle in cui è richiesto l'allineamento a destra, viene aggiunto l'attributo align="right". Per garantire che l'etichetta Commento sia posizionata nella parte superiore del testo su più righe, la cella corrispondente viene impostata su allineata in alto utilizzando l'attributo valign.

Dall'autore: Ti do nuovamente il benvenuto sulle pagine del nostro blog. Nell'articolo di oggi vorrei parlare di varie tecniche di allineamento che possono essere applicate sia ai blocchi che al loro contenuto. In particolare, come allineare i blocchi nei CSS e come allineare il testo.

Allineamento dei blocchi al centro

Nei CSS, centrare un blocco è facile. Questa è la tecnica più conosciuta da molti, ma vorrei parlarne subito, prima di tutto. Ciò significa un allineamento centrato orizzontalmente rispetto all'elemento genitore. Com'è fatto? Diciamo che abbiamo un contenitore e al suo interno si trova il nostro soggetto sperimentale:

Supponiamo che questa sia l'intestazione del sito. Non si estende per tutta la larghezza della finestra e dobbiamo centrarlo. Scriviamo così:

Dobbiamo specificare la larghezza esatta o massima, quindi annotare la proprietà chiave - margin: 0 auto. Imposta i margini esterni della nostra intestazione, il primo valore determina i margini superiore e inferiore e il secondo determina i margini destro e sinistro. Il valore auto dice al browser di calcolare automaticamente il riempimento su entrambi i lati in modo che l'elemento sia esattamente centrato sul suo genitore. Comodo!

Allineamento del testo

Anche questa è una tecnica molto semplice. Per allineare tutti gli elementi in linea, puoi utilizzare la proprietà text-align e i suoi valori: sinistra, destra, centro. Quest'ultimo centra il testo, che è ciò di cui abbiamo bisogno. Puoi anche allineare un'immagine allo stesso modo, perché per impostazione predefinita è anche un elemento in linea.

Allinea il testo verticalmente

Ma questo è più complicato. Per impostazione predefinita, non esiste una proprietà semplice e conosciuta che centra facilmente il testo verticalmente in un contenitore di blocchi. Tuttavia, ci sono diverse tecniche che i progettisti di layout hanno escogitato nel corso degli anni.

Imposta l'altezza del blocco utilizzando il riempimento. Il modo non è impostare un'altezza esplicita utilizzando altezza, ma crearla artificialmente utilizzando i riempimenti in alto e in basso, che dovrebbero essere gli stessi. Creiamo un blocco qualsiasi e scriviamoci le seguenti proprietà:

div( sfondo: #ccc; riempimento: 30px 0; )

Lo sfondo serve solo a mostrare visivamente i bordi e l'imbottitura. Ora l'altezza del blocco è composta da questi due rientri e dalla linea stessa, e il tutto assomiglia a questo:

Definire l'altezza della linea per il blocco. Penso che questo sia il modo più corretto se devi allineare una riga di testo. Con esso puoi scrivere l'altezza normalmente, usando la proprietà altezza. Successivamente, deve anche impostare l'altezza della linea, uguale all'altezza del blocco nel suo insieme.

div( altezza: 60px; altezza linea: 60px; )

Il risultato sarà simile all'immagine sopra. Tutto funzionerà anche se aggiungi imbottitura. Tuttavia, solo per una riga. Se hai bisogno di più testo nell'elemento, questo metodo non funzionerà.

Converti un blocco in una cella di tabella. L'essenza di questo metodo è che la cella della tabella ha la proprietà vertical-align: middle, che centra l'elemento verticalmente. Di conseguenza, in questo caso il blocco deve essere impostato come segue:

div( display: tabella-cella; allineamento verticale: centro; )

Questo metodo è utile perché puoi allineare tutto il testo che desideri al centro. Ma è meglio scrivere display: table nel blocco in cui è annidato il nostro div, altrimenti potrebbe non funzionare.

Bene, eccoci all'ultima tecnica per oggi: questo è l'allineamento verticale dei blocchi stessi. Va detto che, ancora una volta, non esiste alcuna proprietà specificatamente destinata a questo, ma ci sono alcuni trucchi che dovresti conoscere.

Imposta i rientri come percentuale. Se conosci l'altezza di un elemento genitore e inserisci un altro elemento blocco al suo interno, puoi centrarlo utilizzando il riempimento percentuale. Ad esempio, il genitore ha un'altezza di 600 pixel. Inserisci un blocco alto 300 pixel. Quanto è necessario arretrare in alto e in basso per centrarlo? 150 pixel ciascuno, ovvero il 25% dell'altezza del genitore.

Questo metodo consente l'allineamento solo quando le dimensioni consentono i calcoli. E se il tuo genitore ha un'altezza di 887 pixel, non sarai in grado di registrare nulla con precisione, questo è già chiaro.

Inserisci un elemento in una cella della tabella. Ancora una volta, se trasformiamo l'elemento genitore in una cella di tabella, allora il blocco inserito al suo interno verrà automaticamente centrato verticalmente. Per fare ciò, il genitore deve solo impostare vertical-align: middle.

E se oltre a questo scriviamo anche margin: 0 auto, allora l'elemento diventerà centrato orizzontalmente!

Il layout e l'allineamento centrale delle pagine del sito Web sono uno sforzo creativo e spesso causano 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è trenta%.

Per fare in modo che i blocchi "menu" e "contenuto" si trovino uno accanto all'altro, rendiamo mobile il blocco "menu" e spostiamolo sul bordo sinistro. Imposteremo anche i colori di sfondo per i nostri blocchi. Adesso 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:30%; altezza:300px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere:18px; riempimento-top:10px; ) #content( background:#ffffff; margine sinistro:30% ; altezza:300px; allineamento testo:centro; ) #footer( sfondo:#3e4982; chiaro:entrambi; larghezza:100%; altezza:50px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere:14px; imbottitura superiore: 10px; )

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; font- 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:

body( larghezza:800px; riempimento-sinistra:50%; ) #main( larghezza:800px; margine-sinistra:-400px; ) #header( sfondo:#3e4982; larghezza:800px; altezza:150px; allineamento testo:centro ; colore:#FFFFFF; dimensione carattere:24px; riempimento-top:40px; ) #menu( sfondo:#6173cb; float:sinistra; larghezza:200px; altezza:300px; allineamento testo:centro; colore:#FFFFFF; dimensione carattere:18px; imbottitura-top:10px; ) #content( background:#ffffff; margin-left:200px; altezza:300px; text-align:center; ) #footer( background:#3e4982; clear:entrambi; larghezza: 800px; altezza: 50px; allineamento testo: centro; colore:#FFFFFF; dimensione carattere: 14px; imbottitura superiore: 10px; )

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 dogmi. 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!