Centrato: CSS layout

Quando il layout della pagina è spesso necessario per fare un CSS-way centrato: per esempio, per centrare l'unità principale. Ci sono diverse soluzioni a questo problema, ognuno dei quali prima o poi devono utilizzare qualsiasi codificatore.

Allinea il testo al centro

Spesso per scopi decorativi che si desidera impostare il testo centrato, CSS in questo caso, per ridurre il tempo di imposizione. In precedenza questo è stato fatto utilizzando HTML attributi, ma ora lo standard necessario per allineare il testo con il foglio di stile. In contrasto con il blocco per il quale si desidera cambiare l'imbottitura esterna in allineamento CSS del testo in mezzo è realizzato con una sola riga:

• text-align: center;

Questa proprietà è ereditata e trasmessa da madre a tutti i bambini. Essa non riguarda solo il testo, ma anche ad altri elementi. A tal fine, essi devono essere in minuscolo (es campata) o riga-blocco (eventuali blocchi che specificano proprietà display: block). Quest'ultima opzione consente inoltre di modificare la larghezza e l'altezza dell'elemento, più configurazione flessibile dell'intaccatura.

pagine spesso si allineano attributo per se stesso tag. Questo rende immediatamente il codice non valido, dal momento che il W3C ha riconosciuto attributo align obsoleto. Usandolo in una pagina non è raccomandato.

blocco centrato

Se si desidera impostare l'allineamento del div in mezzo, CSS in grado di offrire un modo abbastanza comodo: l'uso del margine di imbottitura esterna. Imbottitura può essere specificato come gli elementi di blocco, e la linea-blocco. valore Svoysva dovrebbe essere 0 (padding verticale), e auto (rientro automatico orizzontale):

• margin: 0 auto;

Ora questa opzione è riconosciuto come assolutamente valida. Utilizzando imbottitura esterna permette anche di impostare l'allineamento del centro: proprietà CSS-margine ci permette di risolvere molti problemi connessi con l'elemento di posizionamento nella pagina.

Allineamento del bordo sinistro o destro del blocco

A volte CSS-way non richiede l'allineamento del centro, ma è necessario mettere i prossimi due blocchi, uno dal lato sinistro e l'altro – da destra. Per questo v'è la proprietà float, che può assumere uno dei tre valori: sinistra, destra o nessuno. Diciamo che sono due blocchi che dovrebbero essere posizionati fianco a fianco. Quindi il codice è il seguente:

• .left {float: left;}
• .right {float: right}

Se v'è un terzo blocco, che deve essere posizionata sotto i primi due blocchi (ad esempio, piè), allora è necessario registrare caratteristica chiara:

• .left {float: left;}
• .right {float: right}
• piè di pagina {clear: both}

Il fatto che i blocchi con le classi di caduta sinistra e destra fuori del flusso totale, cioè, tutti gli altri elementi ignorato l'esistenza di elementi allineati. Proprietà chiaro: entrambi permette blocco piè o qualsiasi altro visibile precipitato dalle celle di flusso e vieta involucro (float) sui lati destro e sinistro. Pertanto, nel nostro esempio, il piè di pagina è spostata verso il basso.

allineamento verticale

Ci sono casi in cui non è sufficiente per impostare l'allineamento del centro dei CSS-vie, è necessario modificare anche la posizione verticale del blocco bambino. Qualsiasi linea o riga blocco elemento può essere premuto contro il bordo superiore o inferiore, situata al centro dell'elemento genitore o in una posizione arbitraria. Molto spesso richiedono allineamento del centro del blocco, utilizza attributo vertical-align. Supponiamo che ci siano due blocchi, uno nidificati all'interno dell'altro. In questa unità interna – elemento row-block (display: inline-block). È necessario allineare il bambino blocco verticale:

• allineamento del limite superiore – .child {vertical-align: top};
• centrato – .child {vertical-align: middle};
• allineamento del bordo inferiore – .child {vertical-align: bottom};

A elementi di blocco non si applica audio text-align, o vertical-align.

Possibili problemi per le unità allineati

A volte div allineare il centro del CSS-modo può causare un po 'di problemi. Ad esempio, quando si utilizza un galleggiante: per esempio, ci sono tre blocchi: .first, .second e .third. Il secondo e il terzo blocco si trovano nella prima. Un elemento con una classe di seconda allineato a sinistra, e l'ultimo blocco – a destra. Dopo aver allineato le due è sceso dal flusso. Se l'elemento principale non è definita altezza (es, 30em), cesserà di allungare l'altezza delle unità controllate. Per evitare questo errore, utilizzare il "distanziatore" – un'unità speciale, che vede .second e .third. CSS-code:

• .second {float: left}
• .third {float: right}
• .clearfix {height: 0; clear: both;}

pseudo spesso usato: dopo, che permette anche di restituire i blocchi in posizione creando psevdorasporki (nell'esempio nel div con classe si trova all'interno del contenitore e comprende un .left .first e .right):

• .left {float: left}
• .right {float: right}
• .container: after {content: ''; display: table; clear: both;}

Le suddette opzioni – la più comune, anche se ci sono alcune variazioni. Si può sempre trovare il modo più semplice e più conveniente per creare psevdorasporki da esperimenti.

Un altro problema incontrato frequentemente la layout – allineamento degli elementi linea-block. Dopo ognuno di loro uno spazio viene automaticamente aggiunto. Maneggiare aiuta la proprietà margin, che è definito dal rientro negativo. Ci sono altri modi, che vengono utilizzati meno frequentemente, ad esempio, reimpostare la dimensione del carattere. In questo caso, le proprietà dell'elemento genitore registri font-size: 0. Se ubicati nel blocchi di testo, le proprietà degli elementi linea blocchi sono tornati alla dimensione del font desiderata. Ad esempio, font-size: 1em. Il metodo non è sempre conveniente, per cui è molto più comunemente usato versione con margini esterni.

Allineamento dei blocchi consente di creare pagine belle e funzionali: il layout generale e il layout, e la posizione delle merci nei negozi, e le foto sul sito di un piccolo.