How Do i Center Text In CSS?

Question

I have the following code.

.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
line-height:50px;
text-align:center;
background:#000;
}

<!DOCTYPE HTML>
<body>
<div class="circle">Hello Guys! Please help Me...</div>
</body>

jsFiddle Link

What I want to do is center the text but I don't know how to do that.

http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page/31708125#31708125 — MattAllegro, Mar 08 '16 at 19:59

score 1 · Answer 1 · answered Mar 08 '16 at 19:56

1

http://jsfiddle.net/b6335umv/1/ line-height is what you need.

.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
text-align:center;
background:#000;
line-height: 251px;
}

answered Mar 08 '16 at 19:56

Shniper

854
1
9
31

score 1 · Answer 2 · answered Mar 08 '16 at 20:22

Line height is a good solution for this. The key being (when the containing element has a defined height) that line-height and the containing elements height are the same.

In your case

.circle {
  width:251px;
  height:251px;
  border-radius:50%;
  font-size:16px;
  color:#fff;
  line-height:251px;
  text-align:center;
  background:#000;
}

However in responsive cases where the elements are more fluid and the height isn't explicitly defined, it's usually better to use use line-height without units. This article has a pretty good explanation of the details about why.

I liked how you were specific. I should keep this in mind. Thanks! — 21harrisont, Mar 09 '16 at 19:07

How Do i Center Text In CSS?

2 Answers2