Latest web development tutorials

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

.center
{
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:

Esempi

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Prova »

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

body
{
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:

Esempi

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Prova »

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

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Prova »