[ CSS ] 수직정렬 방법! 멤오 멤오

수직 정렬 방법에 대한 메모용 포스팅 :)

다국어 페이지를 하다보니 한국어는 짧다가도 외국어가 너무 길어 짜증나는 일들이 빈번히 생긴다...(수직정렬해줘야해..)

옆의 같은 프론트엔드 개발자분도 저의 빡침이 느껴지시나며ㅋㅋ...

쨌든 수직정렬방법 정리는 아래의 3가지로 정리해놓겠다🥰

 

 

1. position과 transfrom사용

   top을 50%로 주어 부모의 높이의 반만큼 내린 후에, translate을 사용하여

   해당 요소의 반의 높이를 빼주어 수직 정렬한 방법입니다.

   해당 방법의 단점을 하나의 예로 들자면, li태그안에 a태그를 넣었을 경우

   a태그가 li태그의 전체 영역을 자치하게 하고싶은데 불가능 하다는 것입니다.

   ( 따라서 nav할때는 개인적으로 잘 사용하지 않는 방법 )

<style>
    .box{position:relative;}
    .box .item{position:absoulte;top:50%;transform:translate(0, -50%);}
</style>
<div class="box">
    <div class="item">수직 정렬:D</div>
</div>

 

2. flex박스 이용하기

 두번째는 flex박스를 사용하는 것이다.

 해당 코드는 ie에서 한번 점검이 필요하다! 최근 버전은 되는것으로 아는데 아마 9이하에선 flex를 지원안할 수도...

 align-tiems는 컨테이너 교차축에서의 정렬 방법을 설정,

 justify-content는 주축의 정렬 방법을 설정한다.

참고 - https://heropy.blog/2018/11/24/css-flexible-box/

<style>
    .box{display:flex;align-items:center;justify-content:center;}
</style>
<div class="box">
    <div class="item">수직 정렬:D</div>
</div>

 

3. display속성 이용하기

 부모에 display속성으로 table, 그리고 자식에 display속성을 table-cell로 준 후 수직 정렬 시켰다.

 강제로 테이블로 만드는 것

<style>
    .box{display:table;}
    .box .item{display:table-cell;vertical-align:middle;}
</style>
<div class="box">
    <div class="item">수직 정렬:D</div>
</div>

 

요로코롬 수직정렬에 대해 정리해봤다 :) 그럼 이만 총총총🐇🐇