可以保存中心内容的响应CSS圆 [英] Responsive CSS circles that can hold centered content

问题描述

我正在寻找一种方法来创建一个可以保存中心内容的响应式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.

This question is also pretty similar to mine, despite the fact it's an image that should be centered. Using a background image in not an option in my case, so this option isn't working for me as well.

你有什么想法我如何处理？

当然我可以使用一个图片，但CSS会更加优雅。

Do you have any ideas how I could approach this?
Of course I could use an image, but CSS would be much more elegant!

推荐答案

Pure CSS需要许多额外的封装

UPDATED：原始发布（我删除）错过了您正在寻找响应式设计的事实。 建立在我的回答为您引用的响应圈子问题似乎在所有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圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！