центра выравнивания кругового изображения

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.profile-circle { 
    margin-bottom:30px; 
    width: 150px; 
    height: 150px; 
    border-radius: 75px; 
    -webkit-border-radius: 75px; 
    -moz-border-radius: 75px; 
    display:inline-block 
}