웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
텍스트를 세로 정렬하는 방법은 다양한 방법이 존재한다... 간단한 방법으로 line-height 속성을 이용하는 방법이 있고 그 외에도 padding을 적절하게 주거나 "top: 50%;" 등등의 여러가지 방법이 있다. 하지만!!!
오늘 얘기할 부분은 가변 요소... 즉 텍스트가 길이에 따라서 변하는 경우 세로 정렬을 어떻게하는냐에 대한 부분이다.
사실 위에 언급한 방법들은 텍스트가 고정된 값을 가져야 가능하다. 물론 가능할 수도 있지만 텍스트의 개수등에 따라 정렬이 흐트려지는 문제가 발생할 수 있다. 이를 해결할기 위한 방법으로 어떤 방법이 있을까... 이런 고민은 물론 스크립트 언어를 사용함으로써 해결할 수 있을 것이나 개인적으로 css와 html 만으로 해결되는 것이 가능 좋은 방법이라 생각한다. 이 방법은 아래에 기술하여 보았다. 아래를 참고하자.
우리가 원하는 그림은 아래처럼 구현되길 희망한다... 아래 스크린샷을 보자!
스크린샷) 텍스트 길이에 따라 자동으로 세로정렬되는 레이어
위 코드에서 주의깊게 봐야할 부분은 바로 div 태그안에 텍스트를 감싸는 다른 두개의 span 태그이다.
이 태그는 display 값으로 table, table-cell로 바꾸어 자동으로 중앙정렬 될 수 있도록 변경하는 부분이다. 이 외의 방법도 있겠으나 가장 간단하고 쉬운 방법이라 개인적으로 선호하고 자주 사용한다.
오늘 얘기할 부분은 가변 요소... 즉 텍스트가 길이에 따라서 변하는 경우 세로 정렬을 어떻게하는냐에 대한 부분이다.
사실 위에 언급한 방법들은 텍스트가 고정된 값을 가져야 가능하다. 물론 가능할 수도 있지만 텍스트의 개수등에 따라 정렬이 흐트려지는 문제가 발생할 수 있다. 이를 해결할기 위한 방법으로 어떤 방법이 있을까... 이런 고민은 물론 스크립트 언어를 사용함으로써 해결할 수 있을 것이나 개인적으로 css와 html 만으로 해결되는 것이 가능 좋은 방법이라 생각한다. 이 방법은 아래에 기술하여 보았다. 아래를 참고하자.
우리가 원하는 그림은 아래처럼 구현되길 희망한다... 아래 스크린샷을 보자!
스크린샷) 텍스트 길이에 따라 자동으로 세로정렬되는 레이어# 텍스트 세로정렬 소스코드 예제보기
<div>
<span class="textWrap">
<span class="textWrapCell">123</span>
</span>
</div>
<style type="text/css">
div {
height: auto;
width: auto;
max-width: 50px;
}
.textWrap {
display: table;
height: 100%;
}
.textWrapCell {
display: table-cell;
vertical-align: middle;
}
</style>
<span class="textWrap">
<span class="textWrapCell">123</span>
</span>
</div>
<style type="text/css">
div {
height: auto;
width: auto;
max-width: 50px;
}
.textWrap {
display: table;
height: 100%;
}
.textWrapCell {
display: table-cell;
vertical-align: middle;
}
</style>
위 코드에서 주의깊게 봐야할 부분은 바로 div 태그안에 텍스트를 감싸는 다른 두개의 span 태그이다.
이 태그는 display 값으로 table, table-cell로 바꾸어 자동으로 중앙정렬 될 수 있도록 변경하는 부분이다. 이 외의 방법도 있겠으나 가장 간단하고 쉬운 방법이라 개인적으로 선호하고 자주 사용한다.
아래의 글도 찾고 계시지 않나요?