Div圓圈圖像問題

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/