În CSS, mai multe proprietăți pot fi folosite pentru a alinia elementele pe orizontală.
Centrul Align - Utilizarea margin
Setarea lățimii unui element de nivel bloc va împiedica întinde spre marginile recipientului acestuia. Utilizați margin: auto; , La centru pe orizontală un element din interiorul recipientului acestuia.
Elementul va lua în sus lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două marje:
Exemplu
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Încearcă - l singur » Tip: Centrul oscilanți nu are nici un efect în cazul în care width proprietatea nu este setată (or set to 100%) .
Sfat: Pentru alinierea textului, vezi CSS Text capitol.
Stânga și dreapta Align - Utilizarea position
O metodă pentru elementele de aliniere este de a utiliza position: absolute; :
Exemplu
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Încearcă - l singur » Note: Elementele poziționate absolute sunt îndepărtate din fluxul normal și se pot suprapune elemente.
Indicație: La alinierea elementelor cu position , definesc întotdeauna margin și padding pentru <body> element. Acest lucru este de a evita diferențele vizuale în diferite browsere.
Există , de asemenea , o problemă cu IE8 și mai devreme, atunci când se utilizează position . Dacă un element container (in our case <div class="container"> ) are o lățime specificată, iar !DOCTYPE Declarația lipsește, IE8 și versiunile anterioare se va adăuga o 17px margin de 17px margin pe partea dreaptă. Aceasta pare a fi spațiu rezervat pentru o bară de derulare. Deci, setați întotdeauna !DOCTYPE Declarația atunci când se utilizează position :
Exemplu
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Încearcă - l singur » Stânga și dreapta Align - Utilizarea float
O altă metodă pentru elementele de aliniere este de a folosi float proprietatea:
Exemplu
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Încearcă - l singur » Indicație: Atunci când alinierea elementelor cu float , definesc întotdeauna margin și padding pentru <body> element. Acest lucru este de a evita diferențele vizuale în diferite browsere.
Există , de asemenea , o problemă cu IE8 și mai devreme, atunci când se utilizează float . În cazul în care !DOCTYPE Declarația lipsește, IE8 și versiunile anterioare se va adăuga o 17px margin de 17px margin pe partea dreaptă. Aceasta pare a fi spațiu rezervat pentru o bară de derulare. Deci, setați întotdeauna !DOCTYPE Declarație atunci când se utilizează float :
Exemplu
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Încearcă - l singur »