HTML menyediakan atribut penjajaran teks dan penjajaran menegak untuk mengawal penjajaran kotak teks. Pilihan penjajaran mendatar termasuk: Pilihan penjajaran menegak, Kiri dan Kanan termasuk: Garis Dasar, Tengah, Atas dan Bawah. Sifat ini boleh digunakan untuk mencipta bentuk yang bersih dan cantik, contohnya: menjajarkan kotak teks tarikh ke kanan dan memusatkannya secara menegak supaya ia sejajar dengan label.

Gunakan HTML untuk memperbaik penjajaran kotak teks

Penjajaran kotak teks adalah penting untuk mencipta bentuk yang bersih dan cantik. Menggunakan HTML, anda boleh mengawal penjajaran mendatar dan menegak kotak teks dengan mudah.

Penjajaran Mendatar

Penjajaran mendatar mengawal kedudukan kiri dan kanan teks dalam kotak teks. Terdapat tiga pilihan utama dalam HTML:

• "justify": Justify text pada kedua-dua hujung
"justify"：文本两端对齐
• "left"：文本左对齐
• "right"：文本右对齐

通过在文本框的 style 属性中指定 text-align 属性，您可以设置水平对齐方式。例如：

<input type="text" style="text-align: right;">

这将创建一个文本框，其中文本右对齐。

垂直对齐

垂直对齐控制文本框内文本的上下位置。HTML 没有直接的对齐属性，但您可以使用 CSS 的 vertical-align 属性。

• "baseline"：文本与底线对齐
• "middle"：文本垂直居中
• "top"：文本顶部对齐
• "bottom"：文本底部对齐

为了设置垂直对齐方式，您需要将 vertical-align 属性添加到包含文本框的元素的 CSS 样式中。例如：

<div style="vertical-align: middle;">
  <input type="text">
</div>

这将创建一个文本框，其中文本垂直居中。

实战案例：使用 text-align 和 vertical-align"left": Justify text to the left li>"right": Teks dijajarkan ke kanan

Dengan menyatakan atribut text-align dalam style kod> atribut kotak teks, Anda boleh menetapkan penjajaran mendatar. Contohnya: <p><pre class='brush:html;toolbar:false;'>&lt;div style=&quot;display: flex; justify-content: end;&quot;&gt; &lt;label for=&quot;date&quot;&gt;日期：&lt;/label&gt; &lt;input type=&quot;text&quot; id=&quot;date&quot; style=&quot;text-align: right; vertical-align: middle;&quot;&gt; &lt;/div&gt;</pre></p>Ini akan membuat kotak teks dengan teks dijajarkan ke kanan. <p></p>🎜Penjajaran Menegak🎜🎜🎜Penjajaran menegak mengawal kedudukan atas dan bawah teks dalam kotak teks. HTML tidak mempunyai sifat penjajaran langsung, tetapi anda boleh menggunakan sifat <code>vertical-align CSS. 🎜🎜🎜"garis dasar": Teks diselaraskan dengan garis bawah🎜"tengah": Teks berpusat secara menegak🎜"atas" kod>: Teks penjajaran atas🎜"bawah": Penjajaran bawah teks🎜Untuk menetapkan penjajaran menegak, anda perlu vertical-align atribut ditambahkan pada gaya CSS elemen yang mengandungi kotak teks. Contohnya: 🎜rrreee🎜Ini akan membuat kotak teks dengan teks berpusat secara menegak. 🎜🎜🎜Kes praktikal: menggunakan <code>text-align dan vertical-align🎜🎜🎜Andaikan anda mempunyai borang yang mengandungi kotak teks untuk diisi tarikh. Untuk menjajarkan tarikh dengan betul dan berpusat menegak, anda boleh menggunakan kod HTML dan CSS berikut: 🎜rrreee🎜Kod ini akan membuat kotak teks tarikh yang dijajarkan ke kanan dan berpusat menegak. 🎜

Atas ialah kandungan terperinci . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!