html - inline-block divs 下一个 div 包含被下推的图像

Question

请看我的小提琴：

http://jsfiddle.net/2uJKR/70/

包含文本的 div 被向下推，我希望所有 4 个都水平对齐。

什么不见​​了？

HTML

<div class="bar">
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element">
        TEXT 1
    </div>
    <div class="element ">
        TEXT 2
    </div>
</div>

CSS

.bar {
  position:relative;
  margin:1px auto 1px auto;
  width:425px;
  height:50px;
  border:1px solid red;
}

.element {
  display:inline-block;
  width:100px;
  height:50px;
  border:1px solid blue;
}

.image img {
  display:block;
  margin:0 auto;
  margin-top:10px;
  width:30px;
  height:30px;
}

Answer 1

添加vertical-align:top到您的 .element 类。

.element {
    display:inline-block;
    width:100px;
    height:50px;
    border:1px solid blue;
    vertical-align:top;
}

jsFiddle 示例

基线是默认的垂直对齐方式，您希望它们顶部对齐。