[웹표준]div 중앙정렬

 

align의 center가 되는 것은 block레벨이 아닌 것에만 적용이 된다.
div는 block 레벨이니 당연히 div 자체에는 align이 되지 않는다.

---

예제 1
<style type="text/css">
#BoxCenter {margin:0 auto; width:300px; height:100px; background-color:#33CCFF;}
</style>
<div id="BoxCenter">중앙 정렬</div>

---

예제 2
<style type="text/css">
#BoxCenter {width:400px; margin-right:auto; margin-left:auto; background:#666;}
</style>

<div id="BoxCenter">중앙 정렬</div>

---

예제 1처럼 div에 margin:0 auto;
예제 2처럼 margin-right:auto; margin-left:auto; 하면 중앙 정렬이 된다.