Wie zentriere ich Text innerhalb eines CSS-erstellten Kreises?

CSS-Kreis so ändern, dass er zentrierten Text einschließt

Sie haben ein Beispiel gefunden, bei dem nur CSS zum Zeichnen eines Kreises verwendet wurde. Jetzt möchten Sie es jedoch so ändern, dass Text in der Mitte eingefügt wird.

Versuchen Sie zunächst diese Lösung:

.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>

Leider kann dies zu einer ovalen Form führen ein Kreis.

Die Lösung

Um den Text vertikal zu zentrieren, legen Sie die Zeilenhöhe fest muss derselbe Wert sein wie die Höhe des Div. Im obigen Beispiel sind die Höhe und die Zeilenhöhe beide auf 500 Pixel eingestellt.

.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;
}

Diese Änderung stellt sicher, dass der Text zentriert innerhalb des Kreises angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text innerhalb eines CSS-erstellten Kreises?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!