title: How to center text in a div element?
body: <p>I'm trying to create square element, that will have text centered both vertically and horizontally. Additionally, the whole area of the square should be a link. This is my HTML:</p>
  
  <pre><code>&lt;div class="w1h1 medium"&gt;
      &lt;a class="userLink" target="_blank" href="Fancybox.aspx"&gt;
          &lt;table style="width: 100%; height: 100%"&gt;
              &lt;tr style="vertical-align: central"&gt;
                  &lt;td style="text-align: center; font-weight: bold;"&gt;
                      text in the middle 
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my CSS:</p>
  
  <pre><code>div.w1h1 {
      width: 150px;
      height: 150px;
  }
  
  .medium {
      background-color: #06849b;
      color: white;
      font-family: sans-serif;
  }
  
  a.userLink
  {
      width: 150px;
      height: 150px;
      display: table;
      color: #FFFFFF;
      text-decoration: none;
  }
  </code></pre>
  
  <p>It works in Chrome and Firefox, but not in Internet Explorer. In IE the text is at the top of the square, not in the middle. Can you help me with this?</p>
  
  <p>I just created playground here: <a href="http://jsfiddle.net/Tschareck/yfnnm/" rel="nofollow noreferrer">http://jsfiddle.net/Tschareck/yfnnm/</a></p>