[css 응용] 이미지 세로 중앙 정렬

2020. 5. 23. 00:08

css를 사용하다보면

이미지를 세로 중앙 정렬이 필요한 경우가 매우 많이 있다.

그 방법에 대해 알아보려한다.

1. line-height와 vertical-align을 이용한 정렬

이미지를 감싸는 영역에 line-height값을 준 후에

img태그에 vertical-align:middle 속성을 사용하여 세로 중앙 정렬한다.

<style>
   .img_area{height:300px; line-height:300px;}
   .img_area img{vertical-align:middle;}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

2. 가상선택자 :after를 이용한 정렬

이미지를 감싸는 영역에 가상요소인 :after속성을 사용하여

세로 중앙 정렬을 한다.

<style>
   /* font-size:0을 사용하여 img_area영역 안에 여백을 없앤다. */
   .img_area{height:300px; font-size:0;}  
   .img_area:after{display:inline-block; height:100%; content:""; vertical-align:middle;}
   .img_area img{vertical-align:middle;}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

위의 예시를 보면 img태그로 넣은 이미지 옆에

:after속성을 이용해 height:100%인 임의의 요소를 넣고

그 요소와 img태그와 vertical-align:middle 속성을 이용해 중앙 정렬을 맞춘다.

3. position:absolute 속성을 이용한 정렬

absolute를 이용해 중앙 정렬하는 방법은

크게 2가지로 나눌 수 있다.

고정된 이미지 크기를 가지고 있고

그 이미지의 크기를 확실히 알 경우에 쓸 수 있는

absolute와 margin-top 속성을 이용한 방법과

이미지 크기가 가변적이고

이미지 크기에 대한 정확한 정보가 없을 경우에 쓸 수 있는

absolute와 transform:translateY() 속성을 이용한 방법이 있다.

3-1. absolute & margin-top을 이용한 방법

<style>
   /* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
   .img_area{position:relative; height:300px;}  
   .img_area img{position:absolute; top:50%; margin-top:-100px; height:200px;} 
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

이미지 요소를 top 기준으로 50%만큼 이동 후에

이미지 높이값인 200px의 절반만큼을 margin-top의 마이너스 값으로 끌어 올린다.

이해를 쉽게하기 위해 아래의 예시를 준비했다.

위의 예시는 이미지 영역을 top:50%만 적용한 모습이다.

여기서 margin-top을 이미지의 높이값의 절반 만큼을 빼주면

위에 표시한 영역 만큼이 강제로 끌어올라가게 된다.

그래서 이미지 중앙 정렬을 맞출 수 있다.

3-2. absolute & transform 속성을 이용한 방법

<style>
   /* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
   .img_area{position:relative; height:300px;}
   /* 높이값이 고정되어 있지 않은 경우 */
   .img_area img{position:absolute; top:50%; transform:translateY(-50%);}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

위쪽에서 설명한 absolute와 margin-top을 이용한 방법과 유사한 방법으로

margin-top은 정해진 px의 값을 빼서 끌어올린다면

transform:translate를 이용한 방법은 이미지 영역 높이의 퍼센트 값을 이용해서

끌어올리게 된다.

transform 속성의 특성상 ie9 이상부터 사용할 수 있다.

(ie9 버전의 경우 -ms- 프리픽스를 사용해서 속성을 추가해야한다.)

위에서 설명한 방법 외에도

display:table-cell을 사용하거나 display:flex를 사용하여

이미지 정렬을 쉽게 할 수 있는 방법들이 있다.

작업하는 환경과

상황에 맞춰서 알맞게 사용하면 좋을 것이다.

저작자표시 비영리

'Frontend > CSS' 카테고리의 다른 글

[css 속성] margin (0)	2020.08.22
[css 속성] box-sizing (0)	2020.08.22
[css 단위] vw, vh, vmin, vmax (Viewport 단위) (0)	2020.04.22
[css 속성] transition (0)	2020.04.21
[css 속성] z-index 우선순위 주기, z-index -(음수) 처리 (0)	2020.03.31

About Web