CSS allineamento orizzontale (Allineamento orizzontale)
In CSS, ci sono diverse proprietà di elemento di allineamento orizzontale.
Allinea elementi di blocco
elemento Block è un elemento, occupando l'intera larghezza della parte anteriore e posteriore sono interruzioni di riga.
Esempi di elementi di blocco:
- <H1>
- <P>
- <Div>
allineamento del testo, vedere il testo CSS sezione. .
In questo capitolo, vi mostreremo come bloccare l'allineamento orizzontale di elementi di layout.
Allineato al centro, utilizzando la proprietà margine
elementi di blocco possono essere margini sinistro e destro impostati a allineamento "Auto".
NOTA: L'uso del margine IE8: proprietà auto non funziona, a meno che DOCTYPE dichiarato!
proprietà dei margini possono essere arbitrariamente diviso in sinistra e le impostazioni dei margini destro vengono assegnati automaticamente, il risultato è l'emergere di l'elemento centrale:
Esempi
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Prova »
Tip: Se la larghezza è 100%, l'allineamento non è efficace.
Nota: IE5 vi è un margine nell'elemento BUG blocco di elaborazione.Per fare l'esempio precedente lavoro in IE5, abbiamo bisogno di aggiungere un po 'di codice aggiuntivo. Esempi
Utilizzando la proprietà position è impostata a sinistra, destra-allineati
Un allineamento elemento è di utilizzare il posizionamento assoluto:
Nota: Posizionamento assoluto non ha nulla a che fare con il flusso del documento, in modo che possano coprire gli altri elementi della pagina.
Crossbrowser Problemi di compatibilità
<P align simile quando tali elementi, un margine prestabilito e elemento di imbottitura è sempre una buona idea. Questo per evitare differenze visive in diversi browser.IE8 e precedenti hanno un problema quando si utilizza la proprietà position. Se un elemento contenitore (in questo caso <div class = "contenitore">) larghezza specificata ,! dichiarazione DOCTYPE manca, IE8 e le versioni precedenti si aggiunge un margine di 17px a destra. Questo sembra essere uno spazio di riserva di rotolamento. Quando si utilizza la proprietà position è sempre impostato nella dichiarazione DOCTYPE!
Esempi
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Prova »
Utilizzando la proprietà float a sinistra, allineato a destra
Utilizzando la struttura galleggiante è uno del metodo elemento di allineamento:
Crossbrowser Problemi di compatibilità
Elementi allineati in questo modo, l'elemento di margini e padding pre-determinato è sempre una buona idea. Questo per evitare differenze visive in diversi browser.
IE8 e precedenti hanno un problema quando si utilizza la proprietà float. Se un elemento contenitore (in questo caso <div class = "contenitore">) larghezza specificata ,! dichiarazione DOCTYPE manca, IE8 e le versioni precedenti si aggiunge un margine di 17px a destra. Questo sembra essere uno spazio di riserva di rotolamento. Quando si utilizza la proprietà float è sempre impostato nella dichiarazione DOCTYPE!
Esempi
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Prova »