HTML如何让文字居中？附两种方式

猿友 2021-03-11 16:02:56 浏览数 (135942)

我们在编写一个网页时，经常需要将文字居中。那么这篇文章小编教你HTML如何让文字居中。

方法一、<p></p>标签和<h></h>居中

<p></p>标签和<h></h>标签中可以直接添加align="center"样式，使文字居中。具体代码如下：

<body>
	<p align="center">w3cschool--编程狮</p>
	<h1 align="center">w3cschool--编程狮</h1>
	<h2 align="center">w3cschool--编程狮</h2>
	<h6 align="center">w3cschool--编程狮</h6>
	
</body>

最终效果如下：

center

方法二、div内文字居中

如果想要令 div 内的文字居中显示，则需要通过设置文字的行高进行设置。具体代码如下：

<!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>

最终效果如下：

center1

以上就是HTML如何让文字居中的全部内容。更多HTML的学习请关注 W3Cschool 官网。