title: Vertical align middle on an inline-block anchor tag
body: <p>I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).</p>
  
  <pre><code>a,button {
    display: inline-block;
    -moz-box-sizing: border-box;
    width: 150px;
    height: 150px;
    vertical-align: middle;
    border: 1px solid #000;
    text-align: center;
  }
  </code></pre>
  
  <p>See the jsfiddle below:</p>
  
  <p><a href="http://jsfiddle.net/bZsaw/3/" rel="noreferrer"><a href="http://jsfiddle.net/bZsaw/3/" rel="noreferrer">http://jsfiddle.net/bZsaw/3/</a></a></p>
  
  <p>As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.</p>
  
  <pre><code>a,button {
      width: 150px;
      height: 150px;
      border: 1px solid #000;
      text-align: center;
  }
  
  a {
      display: table;
      -moz-box-sizing: border-box;
  }
  
  a span, button span {
      vertical-align: middle;
      text-align: center;
  }
  
  a span {
      display: table-cell; 
  }
  </code></pre>
  
  <p>Looking for a simple CSS only solution.</p>