본문으로 바로가기

vertical align & center box(수직 중앙 정렬)

category StyleSheet/CSS 2016.09.29 08:36


요소 중앙 정렬(수직정렬)

요소를 중앙(센터) 정렬하는 방법에는 여러가지가 있습니다.

가령, 가장 잘 알려진 line-height 로 중앙정렬을 시키는 방법은 text/image 가 single line 일 경우에만 가능하다는 단점이 있습니다.



그리고 위의 그림과 같은 position: absolute 를 이용하는 방법(demo)과 display: table-cell 을 이용하는 방법이 있습니다.


table-cell 은 다음과 같이 많이 사용합니다.


<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>

<style>
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>

위에 언급된 방법들은 CSS 만을 이용할 시 각각의 해당 요소들을 중앙 정렬 시킬때 마다 line-height 나 margin 값을 재조정해 주어야 합니다.


위의 방법 외에 가상 요소를 사용하여 중앙 정렬시킬 수 있는 좀 더(?) 유연한 방법에 대해 알아보도록 하겠습니다.




vertical-align & :before 이용하여 중앙 정렬시키기

참고로 diplay: table-cell 과 마찬가지로 :before 역시 IE7 를 지원하지 않기 때문에 크로스브라우징은 되지 않습니다.

위의 그림을 보면 가상 요소인 :before 를 이용하여 height: 100% 를 설정한 후 가상요소는 물론 중앙정렬을 시키고자 하는 요소에도 vertical-align: middle 을 주는 방법을 사용합니다.



다음의 코드를 통해 살펴보도록 하겠습니다.


See the Pen MaNmXa by jaeheekim (@jaehee) on CodePen.



SCSS vertical-align 참고 : Vertical align method






Jaehee's WebClub



댓글을 달아 주세요