How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

Question

So this is my code:

.hej {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  text-align: center;
}
.circlem {
  display: inline-block;
  min-width: 15%;
  white-space: nowrap;
}
.circlem:before {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  margin: 15px .5px;
  background: white;
  content: '';
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0vw;
  width: 30vw;
  height: 30vw;
}
.circlem p {
  display: inline-block;
  font-size: 40px;
  font-size: 3.5vw;
  margin: 0 -.5em 0 -100%;
  padding: 0;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
  margin: 0 0 0 -15vw;
  width: 15vw;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
  <div class="circlem">
    <p>
      How Rules
    </p>
  </div>
</div>

And i don't know why, but bigger font-size cause text move to the right side :_: What i should change in my code? Im using bootstrap to make navbar. I didn't edit body section. On the image you can see, how it moved to the right side

Here is link to the codepen.io: http://codepen.io/anon/pen/gPByPx

We need the HTML in order to test it. If you can build a codepen here --> http://codepen.io it would help — LOTUSMS, Feb 07 '16 at 19:15
http://stackoverflow.com/questions/34788537/responsive-circle-with-centered-content — Paulie_D, Feb 07 '16 at 19:27
Check out the "Resize with content - Improvement" in this [answer](http://stackoverflow.com/a/9359039/607874) — Jose Rui Santos, Apr 26 '16 at 11:59

score 2 · Accepted Answer · answered Feb 07 '16 at 19:36

I have cleaned and merged your css code a bit:

       .hej
    {
        width:100%;
        height:1000px;
        background-color:yellow;
        text-align:center;
    }

    .circlem{
      display: inline-block;
      border-radius: 50%;
      margin: 15px auto;
      background: white;
      padding-bottom: 0vw;
      width: 30vw;
      height: 30vw;
      min-width: 15%;
      white-space: nowrap;
    }

    .circlem p {
      position:relative;
      font-size: 3.5vw;
      margin: 0;
      padding: 0;
      line-height: 30vw;
      white-space: normal;
      width: 30vw;
      height: 30vw;
    }

<div class="hej">
        <div class="circlem">
                    <p>
                How Rules
                    </p>
</div>
</div>

score 1 · Answer 2 · answered Feb 07 '16 at 19:19

simply add transform: translateX(-50%) to your paragraph.

.hej {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  text-align: center;
}
.circlem {
  display: inline-block;
  min-width: 15%;
  white-space: nowrap;
}
.circlem:before {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  margin: 15px .5px;
  background: white;
  content: '';
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0vw;
  width: 30vw;
  height: 30vw;
}
.circlem p {
  display: inline-block;
  font-size: 40px;
  font-size: 3.5vw;
  margin: 0 -.5em 0 -100%;
  padding: 0;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
  margin: 0 0 0 -15vw;
  width: 15vw;
  transform: translateX(-50%);
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
  <div class="circlem">
    <p>
      How Rules
    </p>
  </div>
</div>

score 0 · Answer 3 · answered Feb 07 '16 at 19:23

I don't know if you have an actual reason to build it the way you built it, but there is a waaaaaaaaay much simpler way to do this. In my opinion, you are overthinking it. How about this?

   .hej {
      width: 100%;
      height: 1000px;
      background-color: yellow;
      text-align: center;
      padding:20px;
    }

    .circlem p {  
        border-radius: 50%;
        width:220px;
        height:220px;
        background:#fff;
        margin:40px auto;
        display: inline-block;
        font-size: 40px;
        font-size: 3.5vw;
        padding:50px;
    }

See the DEMO

score -1 · Answer 4 · answered Feb 07 '16 at 19:28

.hej {
width:100%;
/*height:1000px;*/
background-color:yellow;
text-align:center;}

.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;}

.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
/*background: white;*/
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;}

.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: -105vh auto 0;
/* width: 15vw; */
position: relative;}

Try this

.circlem p { display: inline-block; font-size: 40px; font-size: 3.5vw; margin: 0 -.5em 0 -100%; padding: 0; vertical-align: middle; white-space: normal; width: 100%; margin: -60vh auto 0; /* width: 15vw; */ float: left; z-index: 55; position: relative; } — Viacheslav, Feb 07 '16 at 19:46

How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

4 Answers4