如何在 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万+ 浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告