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

Question

I am very new in CSS, HTML, and any other UI related technologies, so please accept my apology if this question is not a clever one!

I want multiple boxes with background image to be clickable and have a text in the middle (horizontally and vertically).

I have Html code as below:

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

with following CSS code:

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;

}

As you can see HERE everything sounds fine except that the second box is misplaced when inside text of the first one exceeds one line!!

Have I missed something here?

Thanks in advance for your help.

Answer 1

Your element that's set to inline-table just needs its vertical-align set to something other than the default of baseline :

vertical-align: middle;

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