HTML <img> 标签的 align 属性 详解
HTML <img> 标签的 align 属性
实例
设置文本中的图像的对齐方式：
<img src="/i/eg_cute.gif" align="middle" />
完整实例【亲自试一试】：
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<img> 标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
详细说明
标准没有定义图像相对于其他文字和与其处于同一行中的其他图像的对齐关系。HTML 图像在行中出现时通常只伴有一行文字。而通常的印刷媒体，像杂志，则把文字在图像的周围进行环绕，这样就会有很多行文字与图像相邻，而不只是一行。
幸运的是，文档设计者可以通过 <img> 标签的 align 属性来控制带有文字包围的图像的对齐方式。HTML 和 XHTML 标准指定了 5 种图像对齐属性值：left、right、top 、middle 和 bottom。left 和 right 值会把图像周围与其相连的文本转移到相应的边界中；其余的三个值将图像与其相邻的文字在垂直方向上对齐。Netscape 又增加了 4 种垂直对齐属性：texttop、absmiddle、baseline 和 absbottom，Internet Explorer 则增加了 center。
注意：不同的浏览器以及同一浏览器的不同版本对 align 属性的某些值的处理方式是不同的。
注意：HTML 4.01 不推荐使用 align 属性，XHTML 1.0 Strict DTD 不支持该属性，同时 HTML 5 也不再支持该属性。
浏览器支持
虽然不赞成使用 align，但是几乎所有浏览器都支持该属性。
兼容性注释
不赞成使用 align 属性和 <center> 标签
HTML 4 和 XHTML 中不再推荐使用所有标准中的 align 属性，当然包括 <img> 的 align 属性，以便使用样式表。同时不再使用 <center> 标签。
然而，该属性及标签在 HTML 创作者中非常流行，并且现在流行的浏览器都能很好地支持它们。所以，虽然我们期望 align 和 <center> 将来有一天会消失，但还需要等待很长一段时间。
解决方案
如果您不想使用 align 和 <center> 时该怎么办呢？您可以使用 HTML/XHTML 表格来对齐内容。不过更好的方案是使用样式。例如，margin-left 属性 可以对图像进行缩进，而 float 属性 可以实现文本包围图像的效果。
示例代码：
<img style="float:right" />
完整实例【亲自试一试】：
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif" /> 在文本中</p>
<h2>向右浮动的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" style="float:right" /> 在文本中</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
<img align="value" />
属性值
| 值 | 描述 |
|---|---|
| left | 把图像对齐到左边 |
| right | 把图像对齐到右边 |
| middle | 把图像与中央对齐 |
| top | 把图像与顶部对齐 |
| bottom | 把图像与底部对齐 |
TIY 实例
完整实例【垂直对齐图像】：
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何在文字中垂直对齐图像。
完整实例【水平对齐图像】：
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何使图片浮动至段落的左边或右边。
