响应式CSS圈,可以容纳居中的内容

Question

我正在寻找一种方法来创建一个可以保持居中内容的响应式CSS3圈子.
关于这个圈子,我在这个问题上找到了一些很好的信息.太糟糕了,似乎无法将内容集中在这个内容中.

这个问题与我的问题非常相似,尽管它是一个应该居中的图像.在我的情况下使用背景图像不是一个选项,所以这个选项对我来说也不起作用.

你有什么想法我怎么能接近这个？
当然我可以使用图像,但CSS会更优雅!

Answer 1

纯CSS需要许多额外的包装

更新:原始发布(我删除)错过了您正在寻求响应式设计的事实.根据我对响应圈问题的回答,你引用似乎适用于所有CSS3浏览器,请参阅小提琴.

HTML(需要五个级别的包装器,我只在这个html中显示一个圆圈)

<div class="circles">
    <div>
      <div>
        <div>
          <div>
            <!-- BEG Content -->
            All types of content (see fiddle)
            <!-- END Content -->
          </div>
        </div>
      </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

CSS

.circles{
    margin:0px auto;
}
.circles > div {
    overflow:hidden;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

.circles > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.circles > div > div > div {
    display: table;
    width: 100%;
    height: 100%;
}
.circles > div > div > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 320px)
{
    .circles > div {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .circles > div {padding: 25%;}
}

@media (min-width: 801px)
{
    .circles{width:800px}
    .circles > div {padding: 12.5%;}
}