HTML algin 属性用于指定 HTML 元素中内容的对齐方式(居中、左对齐或右对齐)。
但是,在现代 HTML 中,align 属性已被弃用,取而代之的是使用 CSS 进行布局和对齐。CSS 是现代 Web 开发中设置元素样式和定位元素的标准方式,因为它提供了对齐和显示的更精确的控制。
语法
<tag align = "value"></tag>
适用于
下面列出的元素允许使用 HTML align 属性。
元素 | 描述 |
---|---|
<img> | HTML <img> 标签用于在文档中附加图像。 |
<table> | HTML <table>标签允许我们通过提供行和列工具以有组织的方式放置数据。 |
<iframe> | HTML <iframe> 是一个内联框架,允许我们在当前 HTML 文档中嵌入另一个文档。 |
<caption> | HTML <caption> 标签用于指定表元素的标题。 |
<col> | HTML <col> 标签用于提供有关列的信息。 |
<applet> | HTML <applet> 标签用于在 HTML 文档中嵌入 Java 小程序。 |
<colgroup> | HTML <colgroup> 标签用于描述表中一列或多列的集合,以便进行格式设置。 |
<hr> | HTML <hr> 标签用于在网页上创建水平线。 |
<legend> | HTML <legend>标签用于指定fieldset元素的标题。 |
<tbody> | HTML <tbody>标签用于在 HTML 表中创建一个单独的语义块,用于定义表的正文内容。 |
<td> | HTML <td>标签用于定义表的数据单元格,并用作 tr 元素的子元素。 |
<tfoot> | HTML <tfoot>标签用于对 HTML 表中的页脚内容进行分组。 |
<th> | HTML <th> 标签指定 HTML 表格的标题单元格。 |
<thead> | HTML <thead> 标签用于对HTML表的标题内容进行分组 |
<tr> | HTML <tr> 标签用于定义表中的每一行。 |
HTML align 属性的示例
在以下示例中,我们将讨论如何使用 algin 属性的不同方法。
将属性与 h1 和 p 标签对齐
下面的代码演示了如何使用 algin 属性对齐 h1 和 p 标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML align attribute</title>
</head>
<body>
<!--example of the align attribute-->
<h1 align="left">This is h1 heading.</h1>
<p align="center">Text within the p tag.</p>
</body>
</html>
将属性与 div 标签对齐
考虑另一种情况,我们将使用 align 属性和 div 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML align attribute</title>
<style>
div {
color: green;
font-weight: bolder;
}
</style>
</head>
<body>
<!--example of the align attribute-->
<div align="right">
<p>
Text within the p tag(it will display
the right side of the screen view
because we have used align = "right").
</p>
</div>
</body>
</html>
将属性与表单标签对齐
让我们看一下以下示例,我们将在其中使用 align 属性与表单。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML align attribute</title>
<style>
form {
width: 300px;
height: 210px;
background-color: rgb(21, 114, 185);
color: white;
border-radius: 10px;
}
form button {
width: 100px;
padding: 5px;
}
</style>
</head>
<body>
<!--example of the align attribute-->
<form align="center">
<h1 align="center">Login</h1>
Username: <input type="text">
<br>
<br> Password:<input type="password">
<br>
<br>
<button>Login</button>
</form>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
是否支持 | Yes | Yes | Yes | Yes | Yes |