span을 수직으로 가운데 정렬하기(CSS)

span 태그 내의 텍스트를 가운데에 정렬하는 방법은 여러 가지로 생각해볼 수 있습니다. 그 중 하나가  display:table-cell을 사용하는 것입니다.

CSS를 사용하여 span을 수직으로 가운데 정렬하는 방법

CSS 예:

span {
display: table-cell;
padding-left: 10px;
text-align: left;
vertical-align: middle;
}

DIV 내의 span을 가운데 정렬하려면 DIV와 span의 line-height 값을 동일하게 설정하면 쉽게 가운데에 정렬이 가능합니다.

HTML 예:

<div class="parent">
<span class="child">텍스트</span>
</div>

CSS 예:

.parent {
height: 20px;
}
.child {
line-height: 20px;
vertical-align: middle;
}

.child처럼 요소명을 사용하는 대신 .parent > span으로 처리할 수도 있습니다.

또 다른 방법으로 위에서처럼 display:table을 사용할 수도 있습니다(참고).

.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
}

Div 내의 텍스트를 수직으로 가운데 정렬하고 싶은 경우 "Vertically align text within a div" 문서에서 다양한 방법을 확인할 수 있습니다.

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.