title: Conflict between making a div a clickable link and vertical centering
body: <p>To make the rounded boxes (see <a href="http://jsfiddle.net/L36nq/" rel="nofollow">http://jsfiddle.net/L36nq/</a>) clickable/hoverable, I need to use</p>
  
  <pre><code>a {
      display: block;
  }
  </code></pre>
  
  <p>Yet to keep the images (the two squares) centered, I need to use</p>
  
  <pre><code>#left  {
      display:table;
      ...
  }
  #right {
      display:table;
      ...
  }
  </code></pre>
  
  <p>How do I make the full rounded boxes clickable/hoverable while keeping the images centered?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="left"&gt;
      &lt;div id="cell"&gt;
          &lt;a href="http://google.com/"&gt;
              &lt;img src="box.svg" width="75%" height="75%" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="right"&gt;
      &lt;div id="cell"&gt;
          &lt;a href="http://bing.com/"&gt;
              &lt;img src="box.svg" width="75%" height="75%" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#left  {
      display:table; position:absolute;
      top:25%; left:25%; width:24%; height:50%;
      vertical-align:middle; text-align:center; margin: auto; border-radius:30px;
      background-color: #D88;
  }
  #right {
      display:table; position:absolute;
      top:25%; left:51%; width:24%; height:50%;
      vertical-align:middle; text-align:center; margin: auto; border-radius:30px;
      background-color: #88D;
  }
  #cell {display:table-cell; vertical-align:middle;}
  
  a {
      display: block;
  }
  
  body { background-color: #9D9; }
  </code></pre>