html文本水平居中对齐_如何使用HTML将网页上的文本居中或对齐

html文本水平居中对齐

How To Build a Website With HTML 如何使用HTML构建网站

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义此网站 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从本系列的开头开始 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

Aligning content to the center, left, or right can be useful for arranging content on your page. In this tutorial, we’ll learn how to align text using HTML.

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

To align text on a webage, we can use the style attribute and the property text-align.

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

For example, the following code snippet would center the text “Sample text”:

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

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

To align your HTML content to the left or right, you would replace center with left or right.

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

In this tutorial, we’ll go through the process of using the text-align property to center the images and text in the top section of our webpage as illustrated in our demonstration website.

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

To center this content, we’ll add the text-align property to the <div> element that contains the background image, profile image, title, subtitle, and link in the top section of the homepage.

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

Locate this <div> element in your index.html file and add the highlighted text like so:

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

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

Only copy and add the highlighted text-align attribute as other parts of this HTML code will not be specific to your project. Save your file and reload it in the browser. You should receive something like this:

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

You should now understand how to center and align text and have a section that looks like the top section of the demonstration site. In the next tutorial, we will recreate the middle section of the demonstration site.

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

翻译自: https://www.digitalocean.com/community/tutorials/how-to-center-or-align-text-on-your-webpage-with-html

html文本水平居中对齐