居中对齐圆形图像

Question

我以这种方式在我的网站上放置圆形图片：

HTML：

<table class="profiles-table">
    <td>
        <div class="david-circle profile-circle"></div>
    </td>
    <td>
        <div class="david-circle profile-circle"></div>
    </td>
    <td>
        <div class="david-circle profile-circle"></div>
    </td>
</table>

CSS：

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;
}

这不会使圆形图像居中对齐。如果我用文本替换 div，它是居中对齐的。如果我使用 img src="blah"，它也可以。我是不是做错了什么？

谢谢！

Answer 1

试试下面的 CSS。

table.profiles-table {
    width:100%;
    border: 1px dotted blue;
}
table.profiles-table td {
    border: 1px dotted blue;
    vertical-align:top;
    text-align:center;
    width:33%;
}
div.david-circle {
    background: url(http://placekitten.com/400/400) center center no-repeat;
}
div.profile-circle {
    margin-bottom:30px;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    display: inline-block;
}

将display: inline-block 应用于.profile-circle 以使水平居中有效。

要使背景图像居中，请将center center 添加到背景属性。

查看演示：http://jsfiddle.net/audetwebdesign/arknmb35/

我不确定垂直居中，所以我就这样离开了。

Answer 2

在 div 中添加 display:inline-block

div.profile-circle {
  margin-bottom:30px;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
   display:inline-block
}