title: Simple vertical align issue with div
body: <p>My brain is fried so I need you guys help.</p>
  
  <p>I am trying to do a vertical align in a div.</p>
  
  <p>I have</p>
  
  <p>html </p>
  
  <pre><code>&lt;a href='#'&gt;
    &lt;div class="div"&gt;
       &lt;div class="insideDiv"&gt;text here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>My css</p>
  
  <pre><code>a {
     color: #006699;
     text-decoration: none;
     font-size: 10pt;
     border-width: 0;
     position: relative
  }
  
  .div{
    position: absolute;
    background-color: red;
    top: -75px;
    left: 50px;
    width: 100px;
    height: 50px;
    z-index: 1000;
    padding: 8px;
  }
  
  .insideDiv{
    background-color: white;
    width: 100px;
    height: 47px;
    border: solid 1px grey;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
  }
  </code></pre>
  
  <p>It seems like <code>text here</code> can't be vertically align to middle but is horizontally align to center. Can anyone help me to solve this issue? Thanks so much!</p>