How does HTML center text? Attached in two ways
May 29, 2021 Article blog
Table of contents
When we write a web page, we often need to center the text. So this article teaches you how HTML can center text.
Method 1, < p> label and </h > centered
< the p> label and the label can be added directly to the sign-"center" style to center the text. The code is as follows:
<body>
<p align="center">w3cschool--编程狮</p>
<h1 align="center">w3cschool--编程狮</h1>
<h2 align="center">w3cschool--编程狮</h2>
<h6 align="center">w3cschool--编程狮</h6>
</body>The end result is as follows:
Method two, div text centered
If you want to center the text in div, you need to set it by setting the line height of the text. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style type="text/css">
div{
height: 200px;
width:200px;
background-color: #dea46b;
text-align: center;
line-height: 200px;/*文字水平居中*/
margin:auto;/*div水平居中*/
}
</style>
</head>
<body>
<div class="box3">w3cschool--编程狮</div>
</body>
</html>
The end result is as follows:
That's all the content of how HTML centers text. For more HTML learning, follow W3Cschool.com.