center align a circular image

Question

I'm putting up circular pictures on my site this way:

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

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?

Thanks!

Marc Audet Marc Audet · Accepted Answer · 2014-09-17T11:36:46

Try the following 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;
}

Apply display: inline-block to .profile-circle to that the horizontal centering works.

To center the background image, add center center to the background property.

See demo: http://jsfiddle.net/audetwebdesign/arknmb35/

I was not sure about the vertical centering so I left as is.

center align a circular image

2 Answers