span vertical center align css - CSS를 사용하여 Span을 수직으로 가운데 정렬하기

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

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

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;
}

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.