您现在的位置: 365建站网 > 建站教程 > html5教程 > HTML <img> 标签的 align 属性

HTML <img> 标签的 align 属性

此节有 302 人学习过     参与评论

实例

设置文本中的图像的对齐方式:

<img src="/i/eg_cute.gif" align="middle" />

亲自试一试

定义和用法

<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" />

亲自试一试

语法

<img align="value" />

属性值

描述
left 把图像对齐到左边
right 把图像对齐到右边
middle 把图像与中央对齐
top 把图像与顶部对齐
bottom 把图像与底部对齐

TIY 实例

垂直对齐图像
本例演示如何在文字中垂直对齐图像。
水平对齐图像
本例演示如何使图片浮动至段落的左边或右边。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (302人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------
html5教程目录

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号