5

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!

Community
  • 1
  • 1
Sven
  • 12,997
  • 27
  • 90
  • 148
  • Have you considered using SVG? In what way do you want the circles to be responsive - to the browser window or the content? – robertc Jan 12 '13 at 13:29
  • Is the height of the content fixed? – Thanh Trung Jan 12 '13 at 13:31
  • I just tried SVG - works like a charm, although I still search for a CSS only solution. Yes, the height of the content is fixed. – Sven Jan 12 '13 at 14:12
  • @Sven: I had posted an answer which did not have responsive circles, which I then noticed was a requirement of yours, so I deleted it. I have now posted an updated answer that has the responsiveness I believe you desire. – ScottS Jan 12 '13 at 15:25

3 Answers3

5

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%;}
}
Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
1

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
Thanh Trung
  • 3,566
  • 3
  • 31
  • 42
1

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;
}
Kim
  • 11
  • 1