如何在 HTML 中設定文字對齊？

要在 HTML 中對齊文字，請使用style屬性定義 CSS text-align屬性。請記住，使用 style 屬性會覆蓋全域性設定的任何樣式。它會覆蓋在 HTML <style>標籤或外部樣式表中設定的任何樣式。

HTML style屬性指定元素的內聯樣式。該屬性與 HTML <p>標籤一起使用，並使用 CSS text-align屬性進行居中、左對齊和右對齊。HTML5 不支援<p>標籤的 align 屬性，因此使用 CSS 樣式設定文字對齊。

不同的文字對齊方式

文字對齊示例

下面的示例將說明不同的文字對齊選項。

文字居中對齊

在這個示例中，我們將建立兩個段落元素，並將第二個段落元素對齊到螢幕中央。

<!DOCTYPE html>
<html>
   <body>
      <strong>Default Aligned Text</strong>
      <p>TutorialsPoint</p>
      <strong>Center Aligned Text</strong>
      <p style="text-align:center;">TutorialsPoint</p>
   </body>
</html>

文字右對齊

在這個示例中，我們將建立兩個段落元素，並將第二個段落元素對齊到螢幕右側。

<!DOCTYPE html>
<html>
   <body>
      <strong>Default Aligned Text</strong>
      <p>TutorialsPoint</p>
      <strong>Right Aligned Text</strong>
      <p style="text-align:right;">TutorialsPoint</p>
   </body>
</html>

文字左對齊（預設）

在這個示例中，我們將建立兩個段落元素，並將第二個段落元素對齊到螢幕左側。但是預設對齊方式也是左對齊的。

<!DOCTYPE html>
<html>
   <body>
      <strong>Default Aligned Text</strong>
      <p>TutorialsPoint</p>
      <strong>Left Aligned Text</strong>
      <p style="text-align:left;">TutorialsPoint</p>
   </body>
</html>
您也可以使用 HTML dir屬性設定對齊方式，但如果開頭或結尾有特殊字元，則此方法無效。此屬性用於設定方向。

更新於：2024年8月22日

23.2萬+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告