Maison > Article > interface Web > Comment centrer la zone de texte en HTML
Il existe de nombreuses façons de centrer les zones de texte HTML : zone de saisie de texte : utilisez le code CSS input[type="text"] { text-align: center; } zone de texte : utilisez le code CSS textarea { text-align: center ; Centrage horizontal : utilisez le style text-align: center sur l'élément parent de la zone de texte. Centrage vertical : utilisez l'attribut vertical-align input[type="text"] { vertical-align: middle; }Flexbox : utilisez display:
Comment centrer une zone de texte HTML
Il existe plusieurs façons de centrer une zone de texte en HTML, selon le type de zone de texte que vous souhaitez centrer et la mise en page globale.
Zone de saisie de texte
Pour la zone de saisie de texte, vous pouvez utiliser le code CSS suivant :
<code class="css">input[type="text"] { text-align: center; }</code>
Zone de texte
Pour la zone de texte, vous pouvez utiliser le code CSS suivant :
<code class="css">textarea { text-align: center; }</code>
Centrage horizontal
Si nécessaire Pour centrer la zone de texte horizontalement, vous pouvez utiliser text-align: center
sur l'élément parent de la zone de texte Style : 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
Attributs : 🎜rrreee🎜🎜 Via Flexbox🎜🎜🎜Flexbox est un système de mise en page puissant qui peut facilement centrer les zones de texte : 🎜rrreee🎜🎜Notes🎜🎜overflow: scroll
ou word-wrap: break-word
pour éviter que le texte ne déborde. 🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!