div 안에서 텍스트 세로 가운데 정렬
요즘 한창 div와 css를 이용해 코딩 작업을 하고 있는데.. 작업을 할 때마다 나를 괴롭히던 문제가 바로 텍스트의
세로 가운데 정렬이었다. 메뉴를 구성할 때 li를 사용하면 기본적으로 텍스트는 상단에 붙게 되는데 보통 세로 가운데
정렬이 되도록 디자인을 하기 때문에 매번 참 고민이었다. 그동안 시도한 방법이 위, 아래로 같은 패딩을 주는 거였다.
그러다 오늘 우연히 CSS 관련 책을 보다가 line-height 속성을 이용해서 메뉴 텍스트를 세로 가운데로 정렬하는 것을
보게 되었다. 좀 미심쩍어 구글링해보니 원래 이 방법이 존재했던 모양이다. 진작에 좀 찾아보고 코딩을 할 것을…
테스트 삼아 몇 줄의 코드를 작성해보니까 왼쪽 이미지처럼 텍스트 정렬이
내가 원했던 대로 되는 것을 확인할 수가 있었다. 앞으로 이런 작업을 할 때는
자주 써먹어야 할 방법인 것 같다. 아래는 왼쪽 화면의 코드이다.
<style type=”text/css”>
.vertical-middle { border: 5px solid #690; width: 150px; line-height: 3em; }
</style>
.vertical-middle { border: 5px solid #690; width: 150px; line-height: 3em; }
</style>
<div class=”vertical-middle”>Text</div>
코드의 핵심은 line-height의 크기를 컨테이너의 크기만큼 지정해주는 것이다. 예를 들어 메뉴를 둘러싸는 컨테이너의
높이가 40px 이라면 line-height 의 값 역시 40px로 지정해주는 것이다. 이런 간단한 방법이 있는 줄 진작에 알았다면..
참고 : http://www.student.oulu.fi/~laurirai/www/css/middle/
css 는 css tricks 에서 … ^^
여기에 해결책 나와있지 않다면, 그 해결책은 지구상에 존재하지 않는다는… ㅎㅎ
http://css-tricks.com
좋은 사라이트 알려주셔서 감사합니다. 막힐 때는 우선 방문해봐야 겠습니다.
찾던 정보 잘 보고 갑니다.ㅎㅎ
블로그 찾아주시고 댓글 남겨주셔서 감사합니다. 좋은 하루 되세요.
줄이 두줄이면요? 한줄이면 중간 정렬되지만 두줄이상인 경우 상하가운데 정령 어케해요?
블로그 방문해 주셔서 감사합니다.
물어보신 내용은 위아래 padding 값을 똑같이 주면 됩니다.
input박스에서도 세로가운데정렬할때 line-height 값이랑 height 값을 같게해주면 되더라구요
좋은 정보 감사합니다~^^
블로그 방문해 주셔서 감사합니다.
input 에서도 사용이 가능하군요.. 그 생각은 미처 못했습니다. 좋은 정보 감사합니다.
원하던 정보 잘 적용합니다. 고맙습니다.
블로그 방문해 주시고 댓글 남겨주셔서 감사합니다.
line-height 가 IE7에서는 안먹히는데 좀더 공용적인 해결책을 제시해주셨으면 합니다.
블로그 방문해 주셔서 감사합니다.
해당 팁은 IE7에서도 확인을 했던 것으로 기억을 하고 있습니다.
그런데 IE7에서 적용이 되지 않는다면 padding 값을 위 아래 같게 주는
방법으로 하셔야할 것 같습니다.
그리고 현재는 CSS와 HTML 퍼블리싱은 작업을 하지 않고
PHP와 jQuery 프로그래밍만 하고 있어 추가적인 확인이 어렵습니다.