목록이나 div에서 이미지를 어떻게 수직으로 정렬합니까?

Question

나는이 일부 이미지를 표시하기위한 다음 코드를

HTML :

<div class="footer-logos"> 
     <ul> 
      <li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li> 
      <li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li> 
      <li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li> 
      <li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li> 
      <li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li> 
      <li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>  
     </ul> 
</div> 

CSS :

alt text http://labs.dante-studios.com/footer-logos-normal.jpg

:이처럼 보이는 이미지를 만들어

.footer-logos {text-align:center;} 
.footer-logos img {margin-left:20px;margin-right:20px;} 
.footer-logos img.first {} 
.footer-logos img.last {} 
.footer-logos ul {} 
.footer-logos ul li {display: inline; list-style:none;} 

하지만 나는 그것을 c 이처럼 보이는 수직 있도록 로고를 입력 :

alt text http://labs.dante-studios.com/footer-logos-fixed.jpg

나는 수직으로 CSS를 통해 모든 정렬 시도했지만 난 테이블을 사용하고하지 않는 한 그것은 정말 작동하지 않습니다. 어쨌든 나는 테이블 행을 사용하지 않고 원하는 효과를 얻을 수 있습니까?

UPDATE 1

고정 높이 CSS 요소를 사용할 수없는 즉, 서로 다른 높이 일 수있다 일어난다 이미지 ...

Answer 1

는 영상이 상부 그들의 높이로 구속 고정해야 함 ?

그래서 당신은 그 높이로 포함 된 사업부의 line-height을 설정 한 경우

는 middle에 img 태그의 vertical-align 속성을 설정합니다.

는 여기를 참조하십시오 : http://phrogz.net/CSS/vertical-align/index.html

Answer 2

추가 vertical-align: middle;.footer-logos img에 : 사용자가 설정해야한다고 말했다

.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;} 

페이지 중에 점프 모든 일을 피하기 위해 <img> 각 요소에 width 및 height 고정 하중.

Answer 3

ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;} 
li.bod {color: #502945; font: normal 13px/21x Tahoma; 
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px; 
background: url(components/bod_odrazka.png) left no-repeat;}