如何使用HTML居中或对齐网页上的文本和图像

将内容对齐到中心、左侧或右侧对于在页面上排列内容很有用。 在本教程中，我们将学习如何使用 HTML 对齐文本。

要对齐网页上的文本，我们可以使用 style 属性和属性 text-align.

例如，以下代码片段将使文本“示例文本”居中：

<p style="text-align:center;">Sample text</p>

要将 HTML 内容左对齐或右对齐，可以将 center 替换为 left 或 right。

在本教程中，我们将完成使用 text-align 属性使网页顶部的图像和文本居中的过程，如我们的 演示网站 所示。

为了使内容居中，我们将 text-align 属性添加到包含主页顶部的背景图像、个人资料图像、标题、副标题和链接的 <div> 元素。

在 index.html 文件中找到此 <div> 元素并添加突出显示的文本，如下所示：

...
<!--First section-->
<div style="background-image: url('https://html.sammy-codes.com/images/background.jpg');
background-size: cover; height:480px; padding-top: 80px; text-align: center;">
  <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;">
  <h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
  <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>
  <p style="font-size: 20px; color:#1F9AFE;"><a href="Webpage FilePath";>About this site</a></p>
</div>
...

仅复制并添加突出显示的 text-align 属性，因为此 HTML 代码的其他部分不会特定于您的项目。 保存文件并在浏览器中重新加载。 您应该会收到如下信息：

您现在应该了解如何使文本居中和对齐，并拥有一个看起来像 演示站点 的顶部的部分。 在下一个教程中，我们将重新创建演示站点的中间部分。