dt dd 세로정렬 질문입니다.
한말글
div class=topPhotoBox
div class=photoBox
img src=/images/employ/job_poto.gif width=100 height=120 alt=증명사진/
/div
dl
dtspan이 름/span/dtddspan%=s_name%/span/dd
dtspan기타/span/dtddspan%=s_sub%/span/dd
/dl
/div
style
.topPhotoBox {float:left;width:700px;border-top:2px solid #000000;}
.photoBox {float:left;width:100px;}
.topPhotoBox dl {width:600px;float:left;}
.topPhotoBox dl dt {width:80px;height:60px;}
.topPhotoBox dl dd {width:500px;height:60px;}
.topPhotoBox dl dt,dd {display:inline-block;border:1px solid red;vertical-align:middle;}
.topPhotoBox dl span {display:inline-block;border:1px solid blue;height:100%;vertical-align:middle;}
/style
DT와 DD의 높이값을 주면 vertical-align이 안먹네요..ㅠㅠ 안쓰면 창이 너무 작아져서..;
아래와 같이 만들려고 하는데 매번 세로 중앙정렬이 발목을 잡네요..
테스트(span 넣고 이래저래) 해보다 해보다 안되서 조언을 구하고자 왔습니다...ㅠㅠ
-
퐁당
dd에 line-height:60px;을 주면 span으로 text를 감싸도 세로 정렬이 되는데요... 혹시 텍스트를 2줄 이상 써야해서 그런거라면 span {display:table-cell;width:500px; height:60px; vertical-align:middle;} 하면 되실겁니다~ 다만.... ie7 이하버전에서는 안된다는....
그런데.. ie7에선 block 요소를 inline-block으로 준다고해도.. 적용이 안될텐데요;; -
아픔이보여
line-height로 주면 세로정렬이 됐던걸로 기억합니다.. 단 그게 span으로 text를 감싸기 전이라 한번 해보겠습니다.
float로 잡으면 block으로 되버려서 세로정렬이 안먹히네요.. -
화이트
세로 정렬은 line-height로 줘야 하지 않나요?
-
날위해
그냥 테이블로 변경해야할것 같습니다.
아무래도 옆에 들어가는 사진이 width값을 잡아버리면 height값이 들쑥 날쑥이라..
테이블이 정답이네요..ㅠㅠ
조언주셔서 감사합니다~ -
슬기
네 100%를 제외시키면 위로 올라가서 붙네요.. inline-block으로 잡으면 100%를 넣어도 dt,dd의 60px만큼 높이값이 잡히지 않고 block일때만 100%가 잡히네요~
-
마징가
dt나 dd에 텍스트를 직접 넣기보다는 span으로 감싸주는것이 옳은거 같은디 그냥 지금 올리신 소스에서 span에 height:100%;만 빼면 될거같아 보이는데 혹시 그렇게도 해보셧나욤??
-
봄바람
접근성과 웹표준 작업을 동시에 진행하고 있습니다..ㅠㅠ
두가지 다 위배되지 않는다면..
테이블로 도배하고싶네요..ㅎㅎㅎ -
상1큼한렩
저 구조라면 table로 만드셔도 시맨틱한 구조에 위배되지 않는 형태라고 생각해요.
-
나츠
처음 시작할때는 span없이 작업을 했습니다.. height:60px;를 dt나 dd 한곳에 주면 안준곳만 세로 정렬이 됩니다..;;
하다하다 안되서 span을 넣고 인라인을 먹여서 미들로 잡으면 잡힌다는 글을 보고 해봤는데 역시나 안되네요..ㅠㅠ; -
유1혹
dt와 dd의 높이값이 문제가 아니고 span의 height: 100%; 때문????
부모요소인 dd의 높이를 span이 그대로 가져와, 높이가 60px인 상태에서 시작한다면 글자는 좌측 상단부터 잘 찍혀서 마치 세로정렬이 안된것마냥 보일듯요 ??
실제로 span은 잘 정렬된거구요 ......
여기까지 소설