在 html 中對齊文本框有以下幾種方法：文本對齊屬性：使用 text-align 屬性居左、居中或居右對齊文本框內容。flexbox：使用 justify-content 屬性將文本框在容器中對齊，選項有居左、居中、居右、兩端對齊和平均分配。css grid：使用 justify-content 和 align-items 屬性將文本框在容器中對齊，選項與 flexbox 相同。
HTML 中文本框對齊指南：打造完美布局
對齊文本框是創建整潔且用戶友好的網頁的重要組成部分。HTML 提供了幾種方法來對齊文本框，包括使用文本對齊屬性、Flexbox 和 CSS Grid。
文本對齊屬性
最簡單的方法是使用 text-align 屬性。它可以將文本框的內容居左、居中或居右。例如：
<input type="text" style="text-align: center;">
登錄后復制
Flexbox
Flexbox 是一種強大的布局系統，允許您輕松地控制元素的布局。要使用 Flexbox 對齊文本框，您可以將 justify-content 屬性應用到父元素。它有以下選項：
flex-start: 將元素對齊在容器的開頭flex-end: 將元素對齊在容器的末尾center: 將元素居中對齊space-between: 將元素分配到容器的開頭和末尾之間space-around: 將元素均勻分配在容器中
例如：
<div style="display: flex; justify-content: center;"> <input type="text"> </div>
登錄后復制
CSS Grid
CSS Grid 是另一種提供強大布局功能的模塊。要使用 CSS Grid 對齊文本框，您可以將 justify-content 和 align-items 屬性應用到父容器。它們有與 Flexbox 相同的選項。
例如：
<div style="display: grid; justify-content: center; align-items: center;"> <input type="text"> </div>
登錄后復制
實戰案例
假設您有一個包含標簽和文本框的表單。您希望文本框與標簽垂直對齊。您可以使用以下 CSS：
label {
display: flex;
align-items: center;
}
input {
margin-left: 5px;
}
登錄后復制
結論
本文概述了在 HTML 中對齊文本框的不同方法。通過使用文本對齊屬性、Flexbox 或 CSS Grid，您可以輕松創建具有完美對齊的整潔且用戶友好的布局。
