HTML - center 标签



HTML <center> 标签用于使块级别和内容居中对齐。Center 标签使元素和内容同时居中。

HTML <center> 标签已被弃用,因此,如果我们需要获得相同的结果,我们可以使用 CSS 属性。

语法  


<cenetr>...</cenetr>

属性

<center> 标签支持 HTML 的  全局属性 和 事件属性

HTML center Tag 示例

以下示例将说明 <center> 标签,我们还将使用 <center> 标签的替代选项。

居中文本内容

让我们看一下以下示例,我们将使用中心标签来使 pragraph 内容中心对齐。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML center Tag</title>
</head>
<body>
	 <center>
			<p>
				 This text is centered
			</p>
	 </center>
</body>
</html>

比较 CSS 属性与中心标签

在此示例中,您将看到中心标签和用于创建元素/内容中心对齐的 CSS 属性之间的差异。如您将看到的,如果确定了元素的 with,那么我们需要多个 CSS 属性来匹配中心标签。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML center Tag</title>
	 <style>
	 p{
			 border: 2px solid black; width:200px; 
	 }
	 </style>
</head>
<body>
	 <h3>Center aligned element and text at Once - Using center Tag</h3> 	 
	 <center>
			<p>
				 This text is centered
			</p>
	 </center>
	 <hr>
	 <h3>Center aligned text - Uasing text-align Property</h3> 	 
	 <p style="text-align: center;">
			 This text is centered
	 </p>
	 <hr>
	 <h3>Center aligned element - Using margin-inline Property</h3> 	 
	 <p style="margin-inline: auto;">
			 This text is centered
	 </p>
</body>
</html>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
是否支持 Yes Yes Yes Yes Yes