Div圈图像问题

Question

我试图让这4张图片成为圆圈，但我想我以后只会使用图像，但无论如何。我试图在图像下面放置一个标题（底部 - 中间），而不是它在顶部。这就是发生的事。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以它看起来像我的设计。

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/