So legen Sie fest, dass das Feld in HTML zentriert ist

Um die Boxmitte in HTML festzulegen, können Sie die folgenden Methoden verwenden: horizontale Zentrierung: Textausrichtung: Mitte; Vertikale Zentrierung: Vertikale Ausrichtung: Mitte; zwei Dimensionen Center: display: flex; align-items: center

So zentrieren Sie eine Box in HTML

Eine übliche und nützliche Aufgabe. Abhängig von der Art der Elemente, die Sie ausrichten möchten, und der gewünschten Zentrierung gibt es mehrere Möglichkeiten, dies zu erreichen.

Horizontale Zentrierung

Horizontale Zentrierung bedeutet, dass die Box horizontal auf ihrem übergeordneten Element zentriert wird. Es gibt zwei gängige Methoden:

• text-align: center;text-align: center;：这会将文本内容水平居中在一个块级元素中。
• margin: 0 auto;：这会将块级元素水平居中在父元素中。

例如：

<code class="html"><div style="text-align: center;">
  <p>Hello, world!</p>
</div></code>

垂直居中

垂直居中是指使盒子垂直对其父元素居中。有两种常用的方法：

• vertical-align: middle;：这会将行内元素（如图像或文本）垂直居中在父元素中。
• display: flex; align-items: center;：这会将块级元素垂直居中在父元素中。

例如：

<code class="html"><div style="display: flex; align-items: center;">
  <img src="image.jpg" style="vertical-align: middle;">
</div></code>

两个维度居中

要同时水平和垂直居中一个盒子，可以使用 flexbox: Dadurch wird der Textinhalt horizontal innerhalb eines Elements auf Blockebene zentriert.

🎜margin: 0 auto;🎜: Dadurch wird das Element auf Blockebene horizontal innerhalb des übergeordneten Elements zentriert. 🎜Zum Beispiel: 🎜

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  <div>Box</div>
</div></code>

🎜🎜Vertikale Zentrierung🎜🎜🎜Vertikale Zentrierung bedeutet, dass die Box vertikal auf ihrem übergeordneten Element zentriert wird. Es gibt zwei gängige Methoden: 🎜🎜🎜🎜vertical-align: middle;🎜: Dadurch wird ein Inline-Element (wie ein Bild oder Text) innerhalb des übergeordneten Elements vertikal zentriert. 🎜🎜display: flex; align-items: center;🎜: Dadurch wird das Element auf Blockebene innerhalb des übergeordneten Elements vertikal zentriert. 🎜Zum Beispiel: 🎜rrreee🎜🎜Zentrierung in zwei Dimensionen🎜🎜🎜Um eine Box sowohl horizontal als auch vertikal zu zentrieren, können Sie flexbox verwenden, wie unten gezeigt: 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass das Feld in HTML zentriert ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!