title: center align a circular image
body: <p>I'm putting up circular pictures on my site this way:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="profiles-table"&gt;
      &lt;td&gt;
          &lt;div class="david-circle profile-circle"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="david-circle profile-circle"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="david-circle profile-circle"&gt;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table.profiles-table {
      width:100%;
  }
  table.profiles-table td {
      vertical-align:top;
      text-align:center;
      width:33%;
  }
  div.david-circle {
      background: url(./images/david.jpg) no-repeat;
  }
  div.profile-circle {
      margin-bottom:30px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      -webkit-border-radius: 75px;
      -moz-border-radius: 75px;
  }
  </code></pre>
  
  <p>This doesn't center align the circle image.  If I replace the div with text, it's center aligned.  If I use img src="blah", it also works.  Am I doing something obviously wrong?</p>
  
  <p>Thanks!</p>