Es gibt viele Möglichkeiten, HTML-Textfelder zu zentrieren: Texteingabefeld: CSS-Code verwenden input[type="text"] { text-align: center } text area: CSS-Code verwenden textarea { text-align: center } horizontale Zentrierung: Verwenden Sie den Text-Align: Center-Stil für das übergeordnete Textfeldelement. Vertikale Zentrierung: Verwenden Sie das Vertical-Align-Attribut input[type="text"] { Vertical-Align: Middle }Flexbox: Verwenden Sie Display:
So zentrieren Sie ein Textfeld in HTML
Es gibt verschiedene Möglichkeiten, ein Textfeld in HTML zu zentrieren, abhängig von der Art des Textfelds, das Sie zentrieren möchten, und dem Gesamtlayout.
Texteingabefeld
Für das Texteingabefeld können Sie den folgenden CSS-Code verwenden:
<code class="css">input[type="text"] { text-align: center; }</code>
Textbereich
Für den Textbereich können Sie den folgenden CSS-Code verwenden:
<code class="css">textarea { text-align: center; }</code>
Horizontale Zentrierung
Um das Textfeld horizontal zu zentrieren, können Sie text-align: center
für das übergeordnete Element des Textfelds verwenden. Stil: text-align: center
样式:
<code class="html"><div style="text-align: center;"> <input type="text" value="文本"> </div></code>
垂直居中
对于垂直居中,可以使用 vertical-align
属性:
<code class="css">input[type="text"] { vertical-align: middle; }</code>
通过 Flexbox
Flexbox 是一种强大的布局系统,可以轻松实现文本框居中:
<code class="html"><div style="display: flex; justify-content: center;"> <input type="text" value="文本"> </div></code>
注意点
overflow: scroll
或 word-wrap: break-word
rrreeevertical-align
Attribute verwenden: 🎜rrreee🎜🎜 Via Flexbox🎜🎜🎜Flexbox ist ein leistungsstarkes Layoutsystem, das Textfelder einfach zentrieren kann: 🎜rrreee🎜🎜Notes🎜🎜overflow: scroll
oder word-wrap: break-word
verwenden, um zu verhindern, dass der Text überläuft. 🎜🎜Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Textfeld in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!