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的元素只需要将其垂直对齐设置为默认值baseline以外的其他内容：

vertical-align: middle;

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

使用display：inline-table将第二个内联框移动一点点

1 个答案: