使用html和css将文本放置在三个圆圈下面

Question

如何将文本置于三个圆圈下方，并在一个div中使用响应式设计。下面的示例图片。

Answer 1

下应该是一个很好的起点。

HTML

<div class="container"> 
    <div class="circle-content"> 
     <div class="circle"></div> 
     <p>Circle One</p> 
    </div> 
    <div class="circle-content"> 
     <div class="circle"></div> 
     <p>Circle Two</p> 
    </div> 
    <div class="circle-content"> 
     <div class="circle"></div> 
     <p>Circle Three</p> 
    </div> 
</div> 

CSS

.container { 
    width:100%; 
} 
.circle-content { 
    width:33%; 
    text-align:center; 
    float:left; 
} 
.circle { 
    display:inline-block; 
    width:60%; 
    padding-bottom:60%; 
    border-radius:60%; 
    border:15px solid #333; 
} 
.circle-content p { 
    font-size:16px; 
    color:#666; 
}