如何使用 HTML 将网页上的文字和图片居中对齐

将内容与中心、左或右对齐可以帮助您在页面上安排内容. 在本教程中,我们将学习如何使用HTML对齐文本。

要在网页上对齐文本,我们可以使用风格属性和属性文本对齐。

例如,以下代码片段将中心文本样本文本:

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

要将您的 HTML 内容对齐到左边或右边,您将中心替换为左边或右边。

在本教程中,我们将通过使用)所示。

要集中此内容,我们会将文本对齐属性添加到<div>元素中,该元素包含主页顶部的背景图像、个人资料图像、标题、子标题和链接。

在你的 index.html 文件中找到这个 <div> 元素,然后像这样添加突出的文本:

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

只需复制并添加突出的text-align属性,因为这个HTML代码的其他部分不会针对您的项目。保存您的文件并在浏览器中重新加载它。

Centered content

您现在应该了解如何中心和对齐文本,并有一个看起来像示范网站的顶部部分的部分(https://html.sammy-codes.com/). 在下一个教程中,我们将重塑示范网站的中间部分。