图像的排列属性ALIGN

Posted on 2010-07-27 20:59 火冰·瓶阅读(904) 评论(0) 编辑收藏举报

图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图像与一行文字的相对位置。

"基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同，是指图像底端和文字的底端对齐。
对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。
"中间"(Middle)方式是指图像的中间线和文字的底端对齐。
"绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大，文字前如有小图标，那么图标应该使用"绝对中间"对齐方式。

基本语法: <img src="File＿name" align="Top">; <img src="File＿name" align="Middle">; <img src="File＿name" align="Bottom">; <img src="File＿name" align="Left">; <img src="File＿name" align="Right">; <img src="File＿name" align="Absbottom">; <img src="File＿name" align="Absmiddle">; <img src="File＿name" align="Baseline">; <img src="File＿name" align="Texttop">

语法解释

其中align的属性值如下表所示

属性值	描述
Top	文字的中间线居在图像上方
Middle	文字的中间线居在图像中间
Bottom	文字的中间线居在图像底部
Left	图片在文字的左部
Right	图片在文字的右部
Absbottom	文字的底线居在图片底部
Absmiddle	文字的底线居在图片中间
Baseline	英文文字基准线对齐
Texttop	英文文字上边线对齐

文件范例：9-8.htm

通过<img>标记的align属性设定图片的排列。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>设定图片的排列</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG" align=Left width="100" height="140">
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
13 <hr>
14 <img src="9-1.JPG" align=Right width="100" height="140">
15 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
16 <hr>
17 <img src="9-1.JPG" align=Middle width="100" height="140">
18 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
19 </body>
20 </html>