-1

So I have this problem where I have a Circle and when I wanna write something in the circle it starts outside of the Circle. I think it's because it was a block before but I just made it into circle with border-radius: 50%. How should i write my code so the Text appears in the circle?

#m {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: forestgreen;
  margin: 10px;
}
<div id="m">
  <p>bla bla bla</p>
</div>

I hope u guys can help me :D

abney317
  • 7,760
  • 6
  • 32
  • 56
Libre
  • 1
  • 2

2 Answers2

2

Can use flex to center to the text.

#m {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: forestgreen;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="m">
  <p>bla bla bla</p>
</div>

If you want to get really crazy with it and have more text I recommend this article which uses shape-outside to wrap the text within the circle.

abney317
  • 7,760
  • 6
  • 32
  • 56
  • A good reading about [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – Louys Patrice Bessette Nov 05 '20 at 18:49
  • appreciate you brother – Libre Nov 05 '20 at 18:53
  • This is nice for a small amount of text (i.e. that you know is going to fit) but under the skin the div is still a rectangle and with a lot of text you will get text outside the circle. Does anyone know of a good way to force the text to stay in the circle (ie short lines at the top, getting longer towards the center)? – A Haworth Nov 05 '20 at 18:59
0

I added these 3 lines to your style:

  text-align: center;
  vertical-align: center;
  line-height: 100px;

Which you can see the result of below.

#m {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: forestgreen;
  margin: 10px;
  text-align: center;
  vertical-align: center;
  line-height: 100px;
}
<div  id="m"><p>bla bla bla</p></div>
Marc
  • 11,403
  • 2
  • 35
  • 45