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

╰+哭是因爲堅強的太久メ 2022-11-28 15:25 190阅读 0赞

html文本水平居中对齐

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With 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][How To Build a Website With HTML] if you wish to recreate the demonstration website.

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

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`属性将图像和文本居中显示在网页顶部，如[演示网站所示][demonstration website] 。

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>`元素，然后添加突出显示的文本，如下所示：

...
    
    <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][demonstration website]. In the next tutorial, we will recreate the middle section of the demonstration site.

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

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

html文本水平居中对齐

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[demonstration website]: https://html.sammy-codes.com/
[https_www.digitalocean.com_community_tutorials_how-to-center-or-align-text-on-your-webpage-with-html]: https://www.digitalocean.com/community/tutorials/how-to-center-or-align-text-on-your-webpage-with-html