HTML 提供了 text-align 和 vertical-align 屬性來控製文字方塊的對齊方式。水平對齊選項包括：對齊、左對齊和右對齊；垂直對齊選項包括：基線、中間、頂部和底部。這些屬性可用於建立整齊美觀的表單，例如：將日期文字方塊右對齊並垂直居中，使其與標籤精確對齊。
利用 HTML 提昇文字方塊對齊效果
文字方塊對齊對建立整齊美觀的表單至關重要。使用 HTML，您可以輕鬆控製文字方塊的水平和垂直對齊方式。
水平對齊
水平對齊控製文字方塊內文字的左右位置。 HTML 中有三個主要選項：
"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
假設您有一個表單，其中包含一個填寫日期的文字方塊。為了讓日期右對齊並垂直居中，您可以使用以下 HTML 和 CSS 程式碼：
<div style="display: flex; justify-content: end;"> <label for="date">日期：</label> <input type="text" id="date" style="text-align: right; vertical-align: middle;"> </div>
此程式碼將建立一個右對齊、垂直居中的日期文字方塊。
以上是提昇文字方塊對齊效果的 HTML 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
