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 |