li 내부에 이미지와 텍스트 정렬문제 ..
지지않는
이런식으로 코딩해야하는 작업이 있습니다 ㅎ
주황색 부분은 li 백그라운드로 깔구요
흰색 부분이 이미지 영역 입니다 ~
텍스트 부분이 2줄이 되던지 . 이미지가 세로높이가 좀 더 높아져도 무조건 li 내부에
세로 가운데 정렬이 되야 하는데 정렬이 안되네요 ㅠㅠ
코딩에 어느 부분을 수정해야할까요 ? ㅠㅠ
+) 이게 모바일 코딩이예요 !! ㅎㅎhtml 코딩
ul class=fish_diclist
li class=book01img src=../images/learn/sea_life01.png /br /test/li
li class=book02img src=../images/learn/sea_life02.png /br /test/li
li class=book03/li
/ul
css 코딩
.fish_diclist{margin-left:23px; margin-bottom:21px;}
.fish_diclist:after{content:; display:block; clear:both;}
.fish_diclist li{float:left; font-size:1.2em; font-family:NanumGothicBold; color:#fff;}
.fish_diclist li img{display:inline;}
.fish_diclist .book01{width:93px; height:100px; background:url(../images/learn/book01.png) repeat center top; background-size:100px;
text-shadow:1px 1px 2px #4672b8; text-align:center;
}
-
더글러스
우왓 ㅠㅠ 수다님 감사합니다 ㅠㅠ
수다님 말대로 하니 해결의 낌새가 보이네요 ㅠㅠ ! -
개랑
li에 display:table-cell;vertical-align:middle를 주세요.
그리고 float:left는 지우세요. 이미지 부분 빼고 테스트해보면 어떤 방법인지 아실겁니다. -
울트라
아 ㅠㅠ 제대로 글을 안썼네요 ㅠㅠ 이게 모바일코딩이라서요 ㅠㅠ 그래두 td로 해야하나요 ?
-
둘삥
세로 가운데 정렬은 td로 해야 크로스브라우징이 됩니다
-
에일린
아 이게 세로 가운데 정렬이라서요 .. 가로 가운데 정렬이 아니라 ..
-
시나브로
가운데 정렬이면 li 에 text-align:center를 하면 되지 않나요???