提昇文字方塊對齊效果的 HTML 技巧

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中文網其他相關文章！