[HTML] div 가운데 정렬

 

[HTML] div 가운데 정렬

 

테이블을 사용할때는 align="center" 이라는 속성을 부가 하면 쉽게 되었지만

 

div의 경우는 쉽게 가운데 정렬이 되지 않는다^^

 

기본적으로 margin:0 auto;를 주면 가운데 정렬이 된다고 하지만 

익스8에서는 그것만 주어선 안됨!!

 

그 속성 위에 div를 text-align=center 속성을 주어야 중앙 정렬이 잘됨..

 

#BoxCenter1 의 결과값을 밑에 이미지를 보면 알겠지만

익스와 크롬이 틀리게 나온다.

 

text-align=center;의 속성은 또 크롬에서 안먹히넹.-_-

 

 

 

 

 

<style>
#Wrap	{text-align=center;}
#BoxCenter{margin:0 auto; width:300px; height:100px; background-color:#33CCFF;}
#BoxCenter1{margin:0 auto; width:300px; height:100px; background-color:#CFFF24;text-align=center;}
#BoxCenter2{position:relative;margin-left:-150px;left:50%; width:300px; height:100px; background-color:#FFCCFF;text-align=center;}
</style>


<!-- IE8에서 중앙정렬 됨-->
<div id="Wrap">
	<div id="BoxCenter">
		BoxCenter
	</div>
</div>

<!-- IE8에서 중앙정렬 안되나 다른 브라우저는 됨-->
<div id="BoxCenter1">
		BoxCenter1
</div>

<!-- 모듬 브라우저에 잘 됨-->
<div id="BoxCenter2">
		BoxCenter2
</div>

Internet Explorer8 (익스8)의 결과값 : BoxCenter1 중앙정렬 안됨

 

 

 

크롬의 결과값 : BoxCenter1 중앙정렬 잘됨