css로 수직 정렬하는 방법은 매우 다양하다.그러나 그 중 하나를 선택하기란 어렵다.
나는 그 중에서 최적의 방법을 같이 공유하려고 한다.
방법 1. div태그의 display속성을 table로 설정하는 방법이다. 이렇게 함으로써 div태그에
table속성에 있는 vertical-align 속성을 설정할 수 있다.
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
하지만...아쉽게도 ie6에서는 display:table속성이 먹지 않는다는것을 명심해야한다.
방법 2. 이번에는 absolute속성을 이용하여 top속성에 50%를 주어 콘텐츠를 내리고
margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 마이너스값을
이용한다. 그럼으로써 높이를 고정시킬 수 있다.
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}
<div id="content">Content Here</div>
방법 3. 이 방법은 텍스트의 한라인으로 센터정렬시킨다. 설정하는 법은 대상엘레멘트의 높이값과 line-height를
설정하여 주면, 텍스트가 센터로 위치해진다.
#content {height:100px; line-height:100px;}
<div id="content">Content Here</div>
방법 4. 이미지를 가운데 정렬 시키는 법 1번이 파이어폭스에서만 적용 되는 예제였다면
이번 예제는 ie에서도 적용되는 예제이다.
<style type="text/css">
.vCenter { display:table; width:400px; height:400px; border:1px solid red; }
.vCenter span { display:table-cell; text-align:center; vertical-align:middle; }
.vCenter span a { }
</style>
<!--[if lt IE 8]> ie8보다 버전이 낮은 브라우져에서 실행
<style type="text/css">
.vCenter { position:relative; }
.vCenter span { display:inline-block; position:absolute; top:50%; left:50%; }
.vCenter span a { position:relative; top:-50%; left:-50%; }
</style>
<![endif]-->
<div class="vCenter">
<span>
<a href="#">
<img src="thumbnails.jpeg" alt="이미지" />
</a>
</span>
</div>
최근 덧글