HTML <img> 标签的 align 属性
<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 也不再支持该属性。
1. 语法
<img align="value" />
属性值
值 | 描述 |
---|---|
left | 把图像对齐到左边 |
right | 把图像对齐到右边 |
middle | 把图像与中央对齐 |
top | 把图像与顶部对齐 |
bottom | 把图像与底部对齐 |
2. 范例
设置文本中的图像的对齐方式:
<img src="/i/eg_cute.gif" align="middle" />
3. 浏览器支持
虽然不赞成使用 align,但是几乎所有浏览器都支持该属性。
4. 兼容性注释
不赞成使用 align 属性和 <center> 标签
HTML 4 和 XHTML 中不再推荐使用所有标准中的 align 属性,当然包括 <img> 的 align 属性,以便使用样式表。同时不再使用 <center> 标签。
然而,该属性及标签在 HTML 创作者中非常流行,并且现在流行的浏览器都能很好地支持它们。所以,虽然我们期望 align 和 <center> 将来有一天会消失,但还需要等待很长一段时间。
解决方案
如果您不想使用 align 和 <center> 时该怎么办呢?您可以使用 HTML/XHTML 表格来对齐内容。不过更好的方案是使用样式。例如,margin-left 属性 可以对图像进行缩进,而 float 属性可以实现文本包围图像的效果。
范例
<img style="float:right" />
5. TIY 范例
HTML <img> 标签的 border 属性:<img> 标签的 border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框。默认地,图像是没有边框的(除非图像在 a 元素内部)。