-
div 세로 중앙 정렬팁 - 01(line-height, :after)CODING/HTML & CSS 2018. 10. 23. 17:18line-height 속성을 이용해서 높이를 알 수 없는 이미지를 세로 중앙 정렬 하는 것이 가능하다.<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>vertical align with line-height</title><style type="text/css">div.thumb {background:#eee;width: 1000px;height: 1000px;line-height: 1000px;text-align: center;}div.thumb:after {content: " ";margin-left: -0.6em;white-space: pre;}div.thumb img {vertical-align: middle;}</style></head><body><div class="thumb"></div></body></html>line-height 값을 박스의 높이와 같은 값을 지정하고 안의 이미지를 vertical-align: middle을 사용해서 정렬한다. content 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다.