當HTML圖像不相同時，圖像不對齊

Question

我正在製作圖像視圖，並且在對齊圖像時遇到了一些麻煩。當我連續拍攝兩張相同的圖像時，它會對齊，但當圖像不同時，第二張圖像會比第一張圖像低。這裏是截圖screenshot。這是我的HTML和CSS
HTML

<div id="wrapper"> 
     <div id="images"> 
      <div class="image" onClick="showimage('users/images/username/battlefield4_maars.png','battlefield4_maars.png','3.91MB','png');"> 
       <img src="users/images/username/battlefield4_maars.png"> 
       <div class="normaltext">battlefield4_maars.png</div> 
      </div> 
      <div class="image" onClick="showimage('users/images/username/dark_souls_2.jpg','dark_souls_2.jpg','363KB','jpg');"> 
       <img src="users/images/username/dark_souls_2.jpg"> 
       <div class="normaltext">dark_souls_2.jpg</div> 
      </div> 
      <div class="image" onClick="showimage('users/images/username/thief.jpg','thief.jpg','393KB','jpg');"> 
       <img src="users/images/username/thief.jpg"> 
       <div class="normaltext">thief.jpg</div> 
      </div> 
     </div> 
    </div> 

CSS

#images { 
    margin-top: 20px; 
    display: inline-block; 
} 
.image { 
    height: 200px; 
    width: 140px; 
    border: 1px solid #cccccc; 
    border-radius: 3px; 
    background: #fff; 
    display: inline-block; 
    word-wrap:break-word; 
    padding: 10px; 
    cursor: pointer; 
} 
.image img { 
    width: 140px; 
    height: 140px; 
} 

任何人都知道什麼是錯在這裏嗎？

Answer 1

補充一點：

#images {display:block;} 
.image { 
    vertical-align: top; 
}