이미지와 텍스트 가운데정렬..
본문
답변 2
http://webdir.tistory.com/31 참고해보세요.
이미지와 텍스트가 둘다 인라인 또는 인라인 블럭일때는 vertical-align: middle 을 양쪽다 주어서 어느정도 맞출수 있으나 완전치 못하고요.
table-cell을 이용해서 vertical-align: middle 로 주는 방법이 추천되긴합니다. 부트스트랩의 미디어객체(http://bootstrapk.com/components/#media-alignment) 에서 사용되는 방법이죠.
샘플을 만들어 보았습니다
http://test180118.webbit.kr/111.htm
오른쪽 글 길이에 따라
스타일의
.li_img {width:20%; max-height:100%; line-height:50px;}
에서 line-height:50px;값을 조정하시면 이미지가 가운데 정렬로 맞출수 있습니다
<style type="text/css">
.cont_img {width:100%; clear:both; padding-top:10px;}
.cont_img li {float:left; list-style:none}
.li_img {width:20%; max-height:100%; line-height:50px;}
.li_txt {width:80%}
.li_img img{ vertical-align:middle;}
</style>
<div class="cont_img">
<ul>
<li class="li_img"><img src="/img/main-top9.png"></li>
<li class="li_txt">
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
"아이디어나 간판.............."<br>
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
</li>
</ul>
</div>
<div class="cont_img">
<ul>
<li class="li_img"><img src="/img/main-top9.png"></li>
<li class="li_txt">
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
"아이디어나 간판.............."<br>
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
</li>
</ul>
</div>
<div class="cont_img">
<ul>
<li class="li_img"><img src="/img/main-top9.png"></li>
<li class="li_txt">
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
"아이디어나 간판.............."<br>
"전화 상담 혹은 홈페이지 견적 상담과정에서 생각해 두셨던 "<br>
</li>
</ul>
</div>
답변을 작성하시기 전에 로그인 해주세요.