이미지 정렬문제 ..
서향
ul class=category_list
li
div class=img_boximg src=../images/category/photo01.gif //div
dl class=right_dl
dta href=#Chemicals, Plastics, and Raw Materials/a/dt
ddPE, PP, PVC.../dd
/dl
/li
/ul
- css -
ul.category_list{
width:834px;
}
ul.category_list li{
border-bottom:1px solid #E7E7E7;
float:left;
overflow:hidden;
}
div.img_box{
width:88px; height:88px;
border:1px solid #B5B5B5;
text-align:center; vertical-align:middle;
float:left;
}
이런식일때 div.img_box 안에들어가는 이미지가 좌우 중앙정렬은 되는데
상하 중앙정렬이 전혀 안먹네요 ;;
이미지 사이즈가 고정이아니라 제각각 다른 사이즈가 올수있는상태라서;
왜 상하중앙정렬은 먹지 않을까요 ?
도움 부탁드려용 ..흑
-
보람
오아 ~ 감사합니당 ~
근데 ~ 알려주신방법 잘되는데 ~
어떤 원리인지 모르겠어요 ㅜㅜ; -
그림자
아 박스 안에서 되게 해야 한다는 말씀 인가요?
그렇다면 빈 span을 이용하는 방법이 있습니다.
div class=\img_box\img src=\../images/category/photo01.gif\ /span/span/div
.img_box img { vertical-align:middle; }
.img_box span { vertical-align:middle; overflow:hidden; display:inline-block; width:0 -
터1프한렩
제가 설명이 부족했나봐요 ..ㅜㅜ
제가 원하는것은 div.img_box 라는 88 / 88 픽셀의 박스안에 이미지가 들어가는데
안에들어가는 이미지가 사이즈가 매번다를수도 있어서 img_box라는 div안에서 작은이미지가
들어가더라도 위아래 상하정렬이 되게하려고 했는데 .
좌우정렬은 되어도 상하정렬은 안되더라구요 .. -
로다
float이 아닌 inline-block를 이용한 방법이 있습니다.
img { vertical-align:middle; display:inline-block; }
dl { vertical-align:middle; display:inline-block; }
익스 6,7에서는 block에서 버그가 있으므로 핵을 써주셔야 합니다.
*+ html img { display:inline; }
* html img { display:inline; }
*+ ht -
계획자
상하중앙정렬 하시려는것이 고정값이 아니고 가변적이면 css로는 구현이 힘들거 같습니다.
2줄도 되고 3줄도 되고 이러면 말이죠....