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例子

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