How to Center Text within a CSS-Created Circle?

Modifying CSS Circle to Include Centered Text

You found an example using CSS alone to draw a circle. However, you now seek to modify it to include text in the center.

First, attempt this solution:

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

<div class="circle">Hello I am A Circle</div>

Unfortunately, this may result in an oval shape instead of a circle.

The Solution

To vertically center the text, set the line-height to be the same value as the height of the div. In the example above, the height and line-height are both set to 500px.

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

This modification ensures that the text is displayed centered within the circle.

The above is the detailed content of How to Center Text within a CSS-Created Circle?. For more information, please follow other related articles on the PHP Chinese website!