html - 使用显示 :inline-table move second inline box little bit down

Question

我对 CSS、HTML 和任何其他 UI 相关技术非常陌生，所以如果这个问题不是一个聪明的问题，请接受我的道歉!

我希望多个带有背景图像的框可以点击，并且中间有一个文本(水平和垂直)。

我的 Html 代码如下:

<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Contentdas asd ad adasd asd asdad </span>
    </span>
</a>
<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Content</span>
    </span>
</a>

使用以下 CSS 代码:

a.div_a {
      display:inline-table;
      width:200px;
      height:100px;
      background-color:#CCC;
      background-image:url( http://jsfiddle.net/img/logo.png);
    text-align:center;
    top:0;
    }

.wrapper {
    display: table-cell;
    vertical-align: middle;

}

如你所见HERE一切听起来都很好，除了当第一个框的内部文本超过一行时第二个框放错了位置!!

我是不是漏掉了什么？

预先感谢您的帮助。

Answer 1

设置为 inline-table 的元素只需要将其 vertical-align 设置为 baseline 默认值以外的值:

vertical-align: middle;

http://jsfiddle.net/WcCnW/4/