CODEWITHSUNDEEP
htmlcss
Shniper
Shniper

Reputation: 854

Centering text based on a larger width than the texts max-width

I have a p element inside two circles with borders and need to center the p element based on the width of the circles however I want to cause the p element to break into two lines without needing to create two p elements so I used a max-width. I believe that this is causing it not to center, but I could be wrong. If anyone knows a good hack to get around this please enlighten me

DEMO

<div class="one">
  <div class="two">

    <p class="survive">Surviving Earth</p>

  </div>
</div>


.one {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px inset #81ff14;
}

.two {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px outset #81ff14;
  margin: auto;
  margin-top: 5px;
  text-align: center;
}

.survive {
  font-size: 36px;
  max-width: 100px;
}

Upvotes: 0

Views: 28

Answers (1)

omnichad
omnichad

Reputation: 1655

Your 100px wide <p> is block-level, so it will not follow the inline text-align: center rule. You need to give it an automatic left-right margin to put it in the horizontal center:

.survive {
  font-size: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
}

Once you do this, you'll notice it sits a bit too far to the right. That's because your first word is wider than the 100px limit (I measure about 140px) and the browser will not wrap inside a word. 

.one {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px inset #81ff14;
}

.two {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px outset #81ff14;
  margin: auto;
  margin-top: 5px;
  text-align: center;
}

.survive {
  font-size: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
  text-align: center;
}
<div class="one">
  <div class="two">

    <p class="survive">Surviving Earth</p>

  </div>
</div>

Upvotes: 1

Related Questions