css를 적용할 요소를 세로 가운데로 이동하려면 어떻게 해야할까
html과 css를 사용하다보면 요소를 세로 가운데로 옮기고 싶을때가 있는데 여러 방법을 찾아 보고 사용해보았던 방법을 소개하겠습니다.
vertical-align 참고한 사이트
line-height 참고한 사이트
이 상자들을 예시로 사용해보겠습니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>예제</title>
<link href="./blog.css" rel="stylesheet" />
</head>
<body>
<div class="black">
<div class="red"></div>
</div>
</body>
</html>.black {
width: 800px;
height: 600px;
border: 1px solid black;
}
.red {
width: 300px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
1.직접 옮긴다
제일 단순한방법인데 보통 position:absolute나 position:relative를 사용한뒤 직접 top,bottom을 사용하여 옮기거나 margin-top:을 사용하여
(부모요소의 높이 - 옮길요소의 높이)/2 만큼 옮겨주면 되겠습니다
.red {
width: 300px;
height: 200px;
border: 1px solid red;
display: inline-block;
margin-top: 200px;
}.red {
width: 300px;
height: 200px;
border: 1px solid red;
display: inline-block;
position: relative;
top: 200px;
}직접옮기기 결과
두 코드 모두 같은 결과입니다
2.vertical-align 활용하기
vertical-align:middle은 요소의 수직 가운데 지점을 부모요소의 인라인 요소의 정렬기준 지점에 맞추는 속성입니다
.red {
width: 300px;
height: 200px;
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}하지만 이렇게하면
빨간상자가 움직이지 않는데요 이유는 기준이될 부모요소의 인라인요소가 없기 때문입니다 그래서 저는
<body>
<div class="black">
<div class="helper"></div>
<div class="red"></div>
</div>
</body>빨간상자를 수직중앙으로 옮길 helper class의 div를 생성했습니다.
vertical-align은 인라인요소간의 정렬이기때문에 요소간 inline이나 inline-block속성이어야 합니다!
하지만 그냥은 되지않는데 이유는 기준이될 인라인요소의 수직 정렬기준을 부모요소의 수직 중앙에 맞추어야 하기때문인데요
vertical-align:middle 최종결과
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}이렇게 부모요소 높이의 100%크기로 맞추고 vertical-align:middle 속성을 주어 기준이될 인라인요소의 수직정렬 기준을 중앙으로 맞춰주시면 됩니다
3.line-height 이용하기
line-height를 이용하는 것인데 line-height 이 속성을 가지고 있는 요소의 인라인 요소가 차지하는 영역의 크기 라고 생각하시면 되는데
line-height를 자신의 높이와 동일한 크기로 주면 인라인요소가 차지 하는공간이 높이 전체가 되면서 자동으로 요소의 수직중앙으로 온다고 보시면 되겠습니다
.black {
width: 800px;
height: 600px;
border: 1px solid black;
line-height: 600px;
}
.red {
width: 300px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
근데 이상한거 같다 라고 생각하신다면 이유가 무엇일것 같나요
바로 빨간상자의 수직정렬 기준이 바닥을 기준으로 하기 때문입니다.. 그래서
line-height 최종결과
.black {
width: 800px;
height: 600px;
border: 1px solid black;
line-height: 600px;
}
.red {
width: 300px;
height: 200px;
border: 1px solid red;
vertical-align: middle;
display: inline-block;
}결국엔 vertical-align도 같이 사용해야하네요!
