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

Answer 1

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> 

Answer 2

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> 

Answer 3

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

Answer 4

.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