当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; 
}