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