HTML 居中对齐

网页内容的样式设计扮演着重要的角色，因为它使网页具有吸引力并吸引用户的注意力。将文本居中对齐是非常常见的。

在 HTML 中，可以使用 "align" 属性和 <center> 标签将文本居中对齐。"align" 属性和 <center> 标签在早期版本的 HTML 中受支持。

注意："align" 属性和 <center> 标签在 HTML5 中不再受支持，以便优先使用 CSS（层叠样式表）来样式化网页。建议使用 CSS 的 "text-align" 属性将文本居中对齐，而不是 HTML 的 "align" 属性和 <center> 标签。

HTML <Center> 标签

此标签指定文本的居中对齐，因此您可以使用 <center> 标签控制不同元素的对齐方式。

语法

上面显示的语法包括 <center> 开始标签和 </center> 结束标签，内容写在开始标签和结束标签之间，这将居中对齐。

使用 <center> 标签在 HTML 中将文本居中对齐的示例

示例 1

在此示例中，我们使用 <center> 标签将写在 <h1> 和 <p> 标签中的文本居中对齐。

代码

输出

正如您在下面的输出中看到的，<h1> 和 <p> 标签内的文本居中对齐。

示例 2

在此示例中，我们将在 <center> 标签内写入许多 HTML 标签。

代码

输出

正如您在下面的输出中看到的，每个标签内的文本在网页上居中。

"Align" 属性

在 HTML 中，"align" 属性用于将文本在网页上居中、左对齐或右对齐。您可以通过将其写入 HTML 开始标签内部来实现此属性。

语法

1. 在上述语法中，<tag> 是应用 "align" 属性的 HTML 元素。
2. 内容位于开始 <tag> 和结束 </tag> 之间。
3. 上面语法中的 "align" 属性有四个可能的值：center、left、right 和 justify。
   
   • align="center"：用于将文本居中对齐。
   • align="left"：用于将文本左对齐。
   • align="right"：用于将文本右对齐。
   • align="justify"：用于将文本在元素的左右边缘之间均匀调整。

使用 "Align" 属性在 HTML 中对齐文本的示例

示例 1

在此示例中，我们将 HTML 元素居中对齐。

代码

输出

示例 2

在此示例中，我们将演示 HTML 元素的居中、左对齐、右对齐和两端对齐。

代码

输出

浏览器支持

• 火狐
• Microsoft Edge
• Safari
• Chrome
• Opera
• Firefox 移动版
• Microsoft Edge 移动版
• Safari 移动版
• Opera 移动版

结论

• 您已经了解到可以通过两种方式将文本居中对齐：使用 <center> 标签或使用 align 属性。
• 要使用 <center> 标签将文本居中对齐，您必须在其内部写入一个 HTML 元素。
• 要使用 "align" 属性将文本居中对齐，您必须将 "align" 属性放入 HTML 开始标签内部。
• "align" 属性可以有四个可能的值：center、justify、left 和 right。
• 需要注意的是，<center> 标签和 align 属性需要更新。现在，您可以使用 CSS 的 text-align 属性来居中对齐 HTML 元素。
• 许多浏览器都支持 <center> 标签和 "align" 属性，例如 Firefox、Microsoft Edge、Safari、Chrome、Opera、Firefox Mobile、Microsoft Edge Mobile、Safari Mobile 和 Opera Mobile。