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

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

QA

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

본문

안녕하세요..

제목 그대로 입니다.

어떻게 해야하나요

3552083813_1519177271.8422.jpg

3552083813_1519177284.4186.jpg

 

알려주세요 ㅠㅠ

이 질문에 댓글 쓰기 :

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,145 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT