Проблема с изображением круга круга

Question

Я пытаюсь сделать эти 4 изображения круглыми, но я думаю, что буду использовать изображения позже, но в любом случае. Я пытаюсь поместить заголовок под изображение (нижний-средний), но вместо этого вверху. Это то, что произошло.

.services img{ 
 
    border-radius: 50%; 
 
    padding-left: 10px; 
 
    float: left; 
 
    display: block; 
 
}

<section class="services"> 
 
    <h1 style="text-align:center; font-size:38px;">Services we offer</h1> 
 
    <div class="circle"> 
 
    <img src="http://placehold.it/290x250"> 
 
    <h3>Title</h3> 
 
    </div> 
 
    <div class="circle"> 
 
    <img src="http://placehold.it/290x250"> 
 
    <h3>Title</h3> 
 
    </div> 
 
    <div class="circle"> 
 
    <img src="http://placehold.it/290x250"> 
 
    <h3>Title</h3> 
 
    </div> 
 
    <div class="circle"> 
 
    <img src="http://placehold.it/290x250"> 
 
    <h3>Title</h3> 
 
    </div> 
 
</section>

Так что бы выглядеть мой дизайн.

Answer 1

Вы должны также установить класс .circle плавать слева:

.circle 
{ 
    width: 25%; 
    float: left; 
} 

http://jsfiddle.net/yh988n5e/

Answer 2

.circle{ 
    text-align: center; 
    display: inline-block; 
} 
.services img{ 
    border-radius: 50%; 
    padding-left: 10px; 
    display: block; 
} 

http://jsfiddle.net/mx7xknzr/1/