So zentrieren Sie den Text im Feld in HTML

Es gibt vier Möglichkeiten, den Text in einem HTML-Feld zu zentrieren: Verwenden Sie die CSS-Eigenschaft text-align:center, um ihn horizontal zu zentrieren. Verwenden Sie die Eigenschaften padding-block-start und padding-block-end für die vertikale Zentrierung. Verwenden Sie Flexbox display: flex; justify-content: center; align-items: center für eine flexible Ausrichtung. Verwenden Sie Grid Grid-Template-Columns: Repeat(Auto-Fit, Minmax(0, 1Fr)

So zentrieren Sie den Text im Feld in HTML

In HTML können Sie den Text im Feld Mehrere zentrieren Methoden:

Verwenden Sie die CSS-Eigenschaften

text-align: center: Die gebräuchlichste Methode, die den Text horizontal innerhalb des Containers zentriert

<code class="css">.container {
  text-align: center;
}</code>

padding-block-start und padding-block-end: Gilt für Vertikal zentrierter Text. Stellen Sie diese Eigenschaften auf den gleichen Pixelwert ein, um Text in einem Blockcontainer vertikal zu zentrieren Richten Sie Elemente horizontal und vertikal aus Rastermethode zum Erstellen eines Rasterlayouts. Dieses Codefragment erstellt ein einspaltiges Raster mit horizontal und vertikal zentriertem Text

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}</code>

.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie den Text im Feld in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!