html⽂本⽔平居中对齐_如何使⽤HTML将⽹页上的⽂本居中或
对齐
html⽂本⽔平居中对齐
This tutorial series will guide you through creating and further customizing 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 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)奠定坚实的基础。
html怎么让所有内容居中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 >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 t
ext in the top section of our webpage as illustrated in our .
在本教程中,我们将演⽰如何使⽤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 >
<img src="html.sammy-codes/images/small-profile.jpeg" > <h1 >Sammy the Shark</h1>
<em>
<p > Senior Selachimorpha at DigitalOcean </p>
</em>
<p >
<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 sp
ecific 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 . In the
next tutorial, we will recreate the middle section of the demonstration site.
现在,您应该了解如何使⽂本居中和对齐,并有⼀个类似于顶部的部分。 在下⼀个教程中,我们将重新创建演⽰站点的中间部分。
html⽂本⽔平居中对齐
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论