In CSS, diverse proprietà possono essere utilizzate per allineare gli elementi orizzontalmente.
Centro Allinea - Uso di margin
Impostare la larghezza di un elemento di blocco impedisce di stiramento verso i bordi del suo contenitore. Utilizzare margin: auto; per centrare orizzontalmente un elemento all'interno del suo contenitore.
L'elemento sarà poi prendere la larghezza specificata, e lo spazio rimanente sarà suddiviso in parti uguali tra i due margini:
Esempio
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Prova tu stesso " Suggerimento: Centro allineamento non ha effetto se la width proprietà non è impostata (o impostato al 100%).
Suggerimento: per l'allineamento del testo, vedere il CSS Text capitolo.
Sinistra e Destra Allinea - Uso di position
Un metodo per allineare gli elementi è quello di utilizzare position: absolute; :
Esempio
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Prova tu stesso " Nota: elementi posizionati assoluti vengono rimossi dal flusso normale, e può sovrapporsi elementi.
Suggerimento: Quando si allinea elementi con position , definire sempre margin e padding per il <body> elemento. Questo per evitare differenze visive in diversi browser.
C'è anche un problema con IE8 e precedenti, quando si usa position . Se un elemento contenitore (nel nostro caso <div class="container"> ) ha una larghezza specificata, e il !DOCTYPE Dichiarazione manca, IE8 e le versioni precedenti si aggiunge un 17px margin sul lato destro. Questo sembra essere lo spazio riservato a una barra di scorrimento. Quindi, impostare sempre il !DOCTYPE Dichiarazione quando si utilizza position :
Esempio
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Prova tu stesso " Sinistra e Allinea a destra - Utilizzando float
Un altro metodo per allineare gli elementi è quello di utilizzare il float di proprietà:
Esempio
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Prova tu stesso " Suggerimento: Quando si allinea elementi con float , definire sempre margin e padding per il <body> elemento. Questo per evitare differenze visive in diversi browser.
C'è anche un problema con IE8 e precedenti, quando si utilizza float . Se il !DOCTYPE Dichiarazione manca, IE8 e le versioni precedenti si aggiunge un 17px margin sul lato destro. Questo sembra essere lo spazio riservato a una barra di scorrimento. Quindi, impostare sempre il !DOCTYPE Dichiarazione quando si usa float :
Esempio
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Prova tu stesso "