可以保存中心内容的响应CSS圆

问题描述

我正在寻找一种方法来创建一个可以保存中心内容的响应式CSS3圆圈。

对于圆圈，我在。太糟糕了，似乎无法确定此内容的中心位置。

I am searching for a way to create a responsive CSS3 circle that can hold centered content.
Regarding the circle, I found some good info in this question. Too bad it seems that one can't center the content in this one.

似乎在所有CSS3浏览器，。

Pure CSS requiring many extra wrappers

UPDATED: Original posting (which I deleted) missed the fact that you were seeking a responsive design. Building upon my answer for the responsive circles question you reference seems to work in all CSS3 browsers, see fiddle.

HTML （需要五个级别的封装，我只在此html中显示一个圈子）

HTML (requiring five levels of wrapper, I only show one circle in this 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%;}
}

这篇关于可以保存中心内容的响应CSS圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！