forma sulla pagina è spesso necessario per fare l'allineamento centrale CSS-via: per esempio, per centrare l'unità principale.Ci sono diverse soluzioni a questo problema, ognuno dei quali prima o poi devono utilizzare qualsiasi coder.
Allinea testo centrato
spesso per scopi decorativi che si desidera impostare l'allineamento del testo del centro, CSS in questo caso, riduce il tempo di imposizione.In precedenza, questo è stato fatto usando HTML attributi, ora di serie richiede l'allineamento del testo utilizzando fogli di stile.In contrasto con il blocco per il quale si desidera modificare i margini esterni, con l'allineamento del testo CSS nel mezzo è realizzato con una sola riga:
- text-align: center;
Questa proprietà viene ereditata e trasmessa da padre a tutti i bambini.Essa non riguarda solo il testo, ma anche ad altri elementi.Per fare questo, essi devono essere in minuscolo (ad esempio, la portata) o la linea-blocco (eventuali blocchi che imposta la proprietà display: block).L'ultima opzione consente anche di modificare la larghezza e l'altezza della configurazione più flessibile del rientro.
Spesso le pagine allineare attributo al tag stesso.Questo rende immediatamente il codice non valido come W3C riconosciuto attributo align obsoleto.Il suo uso non è raccomandato nella pagina.
blocco allineamento al centro
Se si desidera specificare l'allineamento del centro del div, CSS in grado di offrire un modo abbastanza semplice: l'uso di margine di indentazione esterna.Imbottitura può essere impostato come un elementi block-level e la linea-blocco.Svoysva valore deve essere impostato su 0 (rientrato verticale) e auto (trattino orizzontale automatico):
- margin: 0 auto;
Ora questa opzione è riconosciuto come assolutamente valida.Utilizzando imbottitura esterna consente inoltre di specificare l'allineamento del centro: proprietà CSS-margine ci permette di risolvere molti problemi connessi con l'elemento di posizionamento nella pagina.Blocco
Allineare sul bordo sinistro o destro
volte l'allineamento centrale CSS vie non è necessario, ma è necessario mettere due unità accanto a uno dal lato sinistro e l'altro - da destra.Per questa proprietà c'è un galleggiante, che può assumere uno dei tre valori: a sinistra, a destra, o nessuno.Diciamo che sono due unità che devono essere messi insieme.Poi il codice sarà:
- .left {float: left;}
- .right {float: right}
Se c'è una terza unità, che deve essere posto sotto i primi due blocchi (ad esempio, il piè di pagina), egliè necessario registrare la proprietà chiaro:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
fatto che i blocchi con le classi a sinistra ea destra caduta su un totaleflusso, cioè, tutti gli altri elementi ignorati l'esistenza di elementi allineati.La proprietà clear: both permette il piè di pagina o di qualsiasi altra unità di veder cadere dagli elementi di flusso e vieta l'involucro (float) sia a sinistra ea destra.Quindi, nel nostro esempio, il piè di pagina si sposterà verso il basso.Allineamento
verticale
Ci sono casi in cui l'allineamento centro insieme insufficiente CSS vie, si devono comunque cambiare la posizione verticale del blocco bambino.Ogni elemento di linea o linea-blocco può essere premuto contro il bordo superiore o inferiore, situata al centro dell'elemento genitore, o essere in qualsiasi luogo.Più spesso richiedono l'allineamento della scatola in centro, l'attributo viene utilizzato vertical-align.Supponiamo che ci siano due unità, uno dentro l'altro.L'unità interna - elemento di linea-blocco (display: inline-block).È necessario allineare l'unità bambino in verticale: allineamento
- sul limite superiore - .child {vertical-align: top};Centro
- allineamento - .child {vertical-align: middle};Allineamento
- al livello più basso - .child {vertical-align: bottom};
su elementi block-level o text-align, o vertical-align non si applica.
Possibili problemi per le unità allineati
volte div allineare il centro del CSS-way può causare problemi minori.Ad esempio, utilizzando float: per esempio, ci sono tre blocchi: .first, .second e .third.Il secondo e terzo sono blocchi nel primo.Un elemento con una classe di secondo blocco sinistro allineato, e l'ultimo - a destra.Dopo aver allineato i due si dal flusso.Se il genitore non è definita altezza (ossia 30em), non sarà più allungare l'altezza delle unità controllate.Per evitare questo errore, utilizzare la funzione "distanziatore" - una unità speciale, che vede .second e .third.CSS-code:
- .second {float: left}
- .third {float: right}
- .clearfix {height: 0;clear: both;}
pseudo usato spesso: dopo, che permette anche di tornare ai blocchi in posizione creando psevdorasporki (in questo esempio in un div con una classe di container si trova all'interno del .first e contiene .left e .right):
- .sinistra {float: left}
- .right {float: right}
- .container: after {content: '';display: table;clear: both;}
sopra opzioni - il 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 di layout frequente - allineamento degli elementi di linea-block.Dopo ciascuna delle loro spazio aggiunto automaticamente.Per far fronte a questo margine aiuto struttura, che è definita dalla rientranza negativo.Ci sono altri metodi che vengono utilizzati meno frequentemente, ad esempio, azzeramento la dimensione dei caratteri.In questo caso, le proprietà del genitore prescritto font-size: 0.Se ubicati nel blocchi di testo, le proprietà degli elementi linea di blocchi sono tornati alle dimensioni desiderate.Ad esempio, font-size: 1em.Il metodo non è sempre conveniente, opzione con margini esterni molto più frequentemente usato.Blocco allineamento
consente di creare bello e funzionale layout di pagina ed è il layout generale e l'ubicazione delle merci nei negozi, e le foto su un piccolo sito web.
