HTML <input> 标签的 align 属性 详解
HTML基础 2023-07-13 10:42:22小码哥的IT人生shichen
HTML <input> 标签的 align 属性
实例
下面的表单拥有两个输入字段以及一个图像形式的提交按钮：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image" src="submit.jpg" alt="Submit" align="right" />
<p>This is some text This is some text This is some text.</p>
</form>
完整实例【亲自试一试】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image" src="/i/eg_submit.jpg" alt="Submit" align="right"/>
<p>This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text .</p>
</form>
<p>请在这幅图像上单击，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
<p class="note"><span>注释：</span>如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>
<p>在 HTML 4.01 中，不赞成使用 input 元素的 align 属性。在 XHTML 1.0 Strict DTD 中不支持该属性。请使用 CSS 代替。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
align 属性只能与 <input type="image"> 配合使用。它规定图像输入相对于周围其他元素的对齐方式。
浏览器支持
只有 "left" 和 "right" 值得到所有浏览器的支持。
兼容性注释
在 HTML 4.01 中，不赞成使用 input 元素的 align 属性。在 XHTML 1.0 Strict DTD 中不支持该属性。
请使用 CSS 代替。
CSS 语法：<input type="image" style="float:right" />
完整实例【CSS 实例: 对齐 input 图像】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image" src="/i/eg_submit.jpg" alt="Submit" style="float:right" />
<p>This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text .</p>
</form>
<p>请在这幅图像上单击，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
<p class="note"><span>注释：</span>如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>
<p>在 HTML 4.01 中，不赞成使用 input 元素的 align 属性。在 XHTML 1.0 Strict DTD 中不支持该属性。请使用 CSS 代替。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在我们的 CSS 教程中，您可以找到更多有关 float 属性 的细节。
语法
<input accept="value">
属性值
| 值 | 描述 |
|---|---|
| left | 左对齐图像（默认）。 |
| right | 右对齐对象。 |
| top | 上对齐图像。 |
| middle | 居中对齐图像。 |
| bottom | 下对齐图像。 |
