Responsive CSS circles that can hold centered content

问题

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.

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

回答1:

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 (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%;}
}

回答2:

If the height of the content is fixed and you want a CSS method, use the following properties to apply to what's inside the cicle

margin: auto; /*will center the element*/
position: relative;
top: 50%;
margin-top: - [here insert the height of the element if you know in advance / 2]px

回答3:

The accepted answer did not work for me, since I wanted to rotate the circle. This does:

HTML

<div class="mycircle">
  <div class="mycontent">
    <span>TEXT</span>
  </div>
</div>

CSS

.mycircle {
  width: 30%; 
  height: 0;
  padding: 15% 0; //padding top & bottom must equal width 
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  background: #dedede; 
}
.mycontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.mycontent:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.mycontent span {
  vertical-align: middle;
  display: inline-block;
}

来源：https://stackoverflow.com/questions/14293719/responsive-css-circles-that-can-hold-centered-content

标签

html

css

css3

responsive-design

geometry