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 =＆＃34; blah＆＃34;，它也可以。我做了一件明显不对的事吗？

谢谢！

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

将display：inline-block添加到divs

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

中心对齐圆形图像

2 个答案: