html - 中心对齐圆形图像

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 添加到 background 属性。

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

我不确定垂直居中，所以我保持原样。