如何实现标签元素在HTML页面中居中显示

学习&实践爱好者

已于 2022-12-17 13:53:44 修改

阅读量4.7w

点赞数 34

分类专栏： HTML5与CSS3 前端开发文章标签： html css

于 2022-12-15 22:10:46 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/128330002

版权

如何实现标签元素在HTML页面中居中显示

在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示，相关知识点较多也较杂乱，本文试图介绍一些比较基本与实用的相关知识。

使用标签的align属性

使用标签的align属性指定标签在HTML页面中显示的位置align="left|right|center|justify|char"，特别提示两点：

第一点是align属性有的标签直接支持，有的不直接支持

支持align属性的标签<h1>、<p>、<div>、<table>、<caption>、<legend>、<col>、<colgroup>、<tbody>、<tr>、<th>、<td> 等标签的 align 属性设置，如：

<p align="center">忽如一夜春风来，千树万树梨花开。</p>

对如不直接支持align属性的标签<img>、<textarea>、<select>、<iframe>、<applet>、<embed>、<object>、<fieldset>可以嵌套在支持align属性的标签内，如：

下面给出示例，演示html网页中如何实现标签（元素）水平居中效果：

<!DOCTYPE html>
<html lang="zh">
    <head>
	<meta charset="utf-8">
        <title> align属性水平居中示例</title>
    </head>
    <body>
        <div align="center"><img src="./雪2.png" /></div>
        <p align="center">忽如一夜春风来，千树万树梨花开。</p>
    </body>
</html>

保存文件名：使用align属性水平居中显示.html，用浏览器打开效果：