text inside a circle not aligned html css

Question

I'm trying to put text inside a circle. I am struggling to get the text aligned correctly (middle of the circle).

So far the code I've tried was:

css:

.circle {
margin:auto;
border-radius: 50%;
background: rgb(0, 34, 102);
padding: 10px;
width: 110px;
height: 110px;
margin-top:1px;
color: rgb(255, 255, 255);
text-align: center;
}

html:

<td colSpan=2> <div class="circle"> Discuss <br> ideas and <br> projects </div> </td>

Here is the result

maybe this answer could be helpfull too :) http://stackoverflow.com/questions/37373734/fully-circular-buttons-with-dynamic-size/37373838#37373838 (not an exact duplicate since text size, so circle size can change ... — G-Cyrillus, Oct 01 '16 at 18:28

score 1 · Answer 1 · answered Oct 01 '16 at 18:14

You can use positioning to horizontally and vertically center your text in the circle. Just use another wrapper div for the text, give it an absolute position with top and left of 50% and translate it back with the transform property.

.circle {
  margin: auto;
  border-radius: 50%;
  background: rgb(0, 34, 102);
  padding: 10px;
  width: 110px;
  height: 110px;
  margin-top: 1px;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
}
.circle div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="circle">
  <div>
    Discuss
    <br>ideas and
    <br>projects
  </div>
</div>

score 0 · Answer 2 · edited Oct 01 '16 at 19:20

0

You're centering it horizontally but not vertically. You could try position: relative; or add padding and text-align: center.

edited Oct 01 '16 at 19:20

Blue

22,608
7
62
92

answered Oct 01 '16 at 18:12

Jess Schiff

1
1

text inside a circle not aligned html css

2 Answers2