안녕하세요.. 제목 그대로 입니다. 어떻게 해야하나요 알려주세요 ㅠㅠ

샘플을 만들어 보았습니다 http://test180118.webbit.kr/111.htm 오른쪽 글 길이에 따라 스타일의 .li_img {width:20%; max-height:100%; line-height:50px;} 에서 line-height:50px;값을 조정하시면 이미지가 가운데 정렬로 맞출수 있습니다 [code] .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;}...

이전 목록 다음

미채택 완료

이미지와 텍스트 가운데정렬..

글쎙

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-02-21 (수) 10:41:53 5,754

안녕하세요..

제목 그대로 입니다.

어떻게 해야하나요

3552083813_1519177271.8422.jpg

3552083813_1519177284.4186.jpg

알려주세요 ㅠㅠ

그누보드5 반응형 이미지 텍스트정렬

답변 2개 / 댓글 2개

별지기천사

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-02-21 (수) 11:35:59

샘플을 만들어 보았습니다
http://test180118.webbit.kr/111.htm

오른쪽 글 길이에 따라
스타일의
.li_img {width:20%; max-height:100%; line-height:50px;}

에서 line-height:50px;값을 조정하시면 이미지가 가운데 정렬로 맞출수 있습니다

Copy

<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>