How Can I Perfectly Center Text Inside a Circular CSS Border?

Centering Text within Circular Borders

Enhancing the visual appeal of web elements can involve customizing shapes. A common design pattern is creating a circle with text centered within it. This article explores a CSS-based solution to achieve just that.

Original Approach and Pitfalls

One popular approach involves using CSS alone to draw a circle. While this method provides a basic framework, adding text to the center can be challenging. Attempting to center text vertically within a circle using existing solutions may result in an oval shape rather than a clean circle.

Solution: Adjusting Line-Height

The key to perfectly centering text within a circle lies in setting the line-height property to the same value as the height of the container div. By doing this, the text will be vertically aligned at the center of the circle.

Example Implementation

Here's an example demonstrating the implementation:

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

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

In this example, the container div has a width and height of 500 pixels. The line-height is also set to 500 pixels, which ensures that the text is vertically centered. This results in a perfectly circular shape with text neatly positioned in the center.

The above is the detailed content of How Can I Perfectly Center Text Inside a Circular CSS Border?. For more information, please follow other related articles on the PHP Chinese website!