Wie zentriere ich Text innerhalb eines CSS-gezeichneten Kreises?

So zeichnen Sie einen Kreis mit Text in der Mitte

Um mit CSS einen Kreis mit Text in der Mitte zu erstellen, ändern Sie den verwendeten Code So zeichnen Sie den Kreis:

1. Stellen Sie die Zeilenhöhe so ein, dass sie mit der Höhe des Div übereinstimmt. Dadurch wird eine einzelne Textzeile gezwungen, vertikal zentriert angezeigt zu werden. Im folgenden Beispiel sind die Höhe und die Zeilenhöhe beide auf 500 Pixel eingestellt.

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

2. Text zum Div hinzufügen. Wickeln Sie den gewünschten Text in das Feld
   ein. Element.

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

Dieser Code erstellt einen zentrierten Kreis mit dem Text „Hallo, ich bin ein Kreis“ in der Mitte.

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