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