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" 문서에서 다양한 방법을 확인할 수 있습니다.