Blog → Cum să aliniați DIV-ul în centrul paginii cu CSS pur?
Până acum, pe Internet, puteți găsi modalități care recomandă indentarea în procente, dar vă recomand să le uitați și să nu le folosiți. Pentru astăzi, cel mai simplu și mai elegant este celălalt - cu setarea automată a marjei (auto). Mai exact, acest design de stil va arăta astfel: "margin: 0px auto". Și prin exemplu. Acesta este codul HTML (test.html):
Și aici este CSS (style.css):
#wrap <
margine: 0 pixeli auto;
lățime: 500px;
fundal-culoare: maro;
>
Verificați! Totul funcționează bine în Chrome, Opera și Firefox. În dovadă, aduc o captură de ecran făcută din fereastra Chrome.
Și aici se găsește o nuanță mică, care adesea poticnește nu numai layout-urile novice, ci și destul de experimentate. Nu din cauza ignoranței întrebării și a banalității - distras, nu a urmărit, capul este ocupat de alții etc. Deschideți pagina în Internet Explorer și vedeți o imagine complet diferită.
De ce așa. Eu, a fost cazul, o dată așezat timp de 20 de minute, figură în CSS, până când am ghicit ce "plug". Așa cum se întâmplă adesea - în lucruri mici. Nu uitați să specificați DOCTYPE! La urma urmei, dacă cea mai mare parte a celorlalte browsere vin cu ea în zbor, atunci Explorer (în cazul meu IE9) a fost extrem de strictă față de uitarea aspectului. Specificați DOCTYPE pentru exemplul de mai sus și - voila, totul funcționează așa cum ar trebui în IE! Iată versiunea finală a codului HTML (test.html):