DIV doboz középre igazítása
2012. február 16. csütörtök, 20:12
 
Ha egy "dobozt" (<div>-et) középre akarunk igazítani, a jobb és bal oldali margint állítsuk autora. Ezzel arra utasítjuk a böngészőt, hogy a doboz mindkét oldalán azonos távolságot hagyjon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>valami</title>
<style type="text/css">
div#kontener {
background-color: grey;
width: 100%;
}
div#doboz {
background-color: white;
margin: 0 auto 0 auto;
width: 250px;
}
</style>
</head>
<body>
<div id="kontener">
        <div id="doboz">
        ez itt a doboz
        </div>
</div>
</body>
</html>
! A dobiz <div>-nek szélességet kell adni (különben nem lenne értelme az azonos távolságnak, mihez képest lenne azonos?). 
A tartalmazó konténernek (itt a container id-jű div) az Explorer 9 miatt 100% szélességet kell adni. Ha a body a tartalmazó konténer, akkor annak adunk 100% szélességet (ezt nem ellenőriztem!!)
Internet 7 és 8 alatt csak akkor működik, ha a doctype deklarációt megadtuk.
Az auto margin más "block" elemekkel is működik.

Így néz ki a böngészőben:
auto margin