수다닷컴

요런 형태로 디자인을 짜고 있는데요.
위쪽의 연회색 부분은 ul로, 아래쪽의 넓은 흰색 부분은 dl로 구성했습니다.
경우에 따라 밑으로 같은 구조의 칸이 반복적으로 붙어야 되구요.
다시 말해, li 부분은 영역 구분에 대한 분류 제목이 들어가며,
dl 부분이 반복적으로 들어갈 수 있도록 되야 됩니다.
테이블을 사용하지 않은 까닭은 추후 각각의 넓이라던가 배경색상, 폰트등이 변경될 수 있기 때문에,
CSS 수정으로 효율적으로 관리하기 위해서입니다;;;

문제는 input과 select 요소의 세로 정렬입니다.
text-align:center를 li와 dd에 썼더니 텍스트와 마찬가지로 가로 정렬은 되더군요.
하지만 세로 정렬이 문제였습니다.
vertical-align:middle과 margin:auto 0 모두적용되지 않더군요. (텍스트도 마찬가지)
그래서 알아낸 방법이 각각의li 또는 dd부분에 line-height를 주는 것인데,
이렇게 하니, 텍스트는 가운데로 세로 정렬이 되더군요.
input의 경우에는 input이 위치하고 있는 영역이 아닌 자기 자신에게 height를 설정하니 세로 정렬이 됐구요.

li input{height:24px;}
ddinput{height:24px;}

이런 식으로요.
하지만 문제가 있었습니다.
IE 버전 마다, 또는 브라우저 마다 높이가 다르게 적용되는 것 같았습니다.
그리고 그에 따라 두번째 이미지 처럼 라인이 뜨는 경우가 생기던군요.
(라인은 li와 dd에 border-right:solid 1px #c2c2c2 이렇게 설정했습니다.)

쓰다보니 저도 제가 무슨 말을 하는지 모르겠네요.
요약하자면 이렇습니다.

li와 dd영역 안에 위치한 텍스트와 input, select 요소들을 중앙으로 세로 정렬하려면 어떻게 해야 되나요?;;;

신청하기