Bagaimana untuk memusatkan kotak teks dalam html

Terdapat banyak cara untuk memusatkan kotak teks HTML: kotak input teks: gunakan input kod CSS[type="text"] { text-align: center } text area: use CSS code textarea { text-align: center } Penjajaran mendatar: Gunakan gaya penjajaran teks: pada elemen induk kotak teks: Gunakan input atribut penjajaran menegak[type="text"] { vertical-align: middle }Flexbox: Gunakan paparan:

Cara memusatkan kotak teks HTML

Terdapat beberapa cara untuk memusatkan kotak teks dalam HTML, bergantung pada jenis kotak teks yang anda mahu pusatkan dan reka letak keseluruhan.

Kotak Input Teks

Untuk kotak input teks anda boleh menggunakan kod CSS berikut:

<code class="css">input[type="text"] {
  text-align: center;
}</code>

Kawasan Teks

Untuk kawasan teks, anda boleh menggunakan kod CSS berikut:

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

Jika perlu Untuk memusatkan kotak teks secara mendatar, anda boleh menggunakan text-align: center pada elemen induk kotak teks Gaya:

<code class="html"><div style="text-align: center;">
  <input type="text" value="文本">
</div></code>

text-align: center 样式：

<code class="css">input[type="text"] {
  vertical-align: middle;
}</code>

垂直居中

对于垂直居中，可以使用 vertical-align 属性：

<code class="html"><div style="display: flex; justify-content: center;">
  <input type="text" value="文本">
</div></code>

通过 Flexbox

Flexbox 是一种强大的布局系统，可以轻松实现文本框居中：

rrreee

注意点

• 确保文本框的父元素具有明确的宽度和高度。
• 如果文本框内有较长的文本，请考虑使用 overflow: scroll 或 word-wrap: break-wordBerpusat secara menegak

🎜Untuk pemusatan menegak, anda boleh menggunakan vertical-align Atribut: 🎜rrreee🎜🎜 Melalui Flexbox🎜🎜🎜Flexbox ialah sistem susun atur berkuasa yang boleh memusatkan kotak teks dengan mudah: 🎜rrreee🎜🎜Nota🎜🎜

• Pastikan induk kotak teks Elemen mempunyai lebar dan ketinggian yang jelas. 🎜
• Jika anda mempunyai teks panjang dalam kotak teks, pertimbangkan untuk menggunakan gaya overflow: scroll atau word-wrap: break-word untuk mengelakkan teks daripada melimpah. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk memusatkan kotak teks dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!