CSS设置图片对齐方式
1、横向对齐方式
图片水平对齐的方式与文字水平对齐的方式基本相同，分为左、中、右3种。
不同的是图片的对齐方式通常不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性来实现的。
<html> <head> <title>水平对齐</title> </head> <body> <table width="100%" border="1"> <tr><td style="text-align:left;"><img src="building.jpg" /></td></tr> <tr><td style="text-align:center;"><img src="building.jpg" /></td></tr> <tr><td style="text-align:right;"><img src="building.jpg" /></td></tr> </table> </body> </html>
2、纵向对齐方式
图片竖直方向上的对齐方式主要体现在与文字搭配的情况下，尤其当图片的高度与文字本身不一致时。
在CSS中同样是通过vertical-align属性来实现各种效果的。
当vertical-align的值为baseline时，两幅图片的下端都落在文字的基线上，即如果给文字添加了下划线，就是下划线的位置。对于其他的值，都能从显示结果和值本身的名称直观地得到结果。
图片的竖直对齐也可以用具体的数值来调整，正数和负数都可以使用。
<html> <head> <title>竖直对齐 包含具体数值</title> <style type="text/css"> <!-- p{ font-size:15px; } img{ border:1px solid #000055; } --> </style> </head> <body> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:baseline;" />方式：baseline<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:baseline" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:bottom;" />方式：bottom<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:bottom" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:middle;" />方式：middle<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:middle" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:top;" />方式：top<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:top" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:sub;" />方式：sub<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:sub" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:super;" />方式：super<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:super" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:text-bottom;" />方式：text-bottom<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:text-bottom" />方式</p> <p>竖直对齐<img src="file:///F|/0-css+div/书中实例/第4章/donkey.jpg" style="vertical-align:text-top;" />方式：text-top<img src="file:///F|/0-css+div/书中实例/第4章/miki.jpg" style="vertical-align:text-top" />方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:5px;">方式：5px</p> <p>竖直对齐<img src="miki.jpg" style="vertical-align:-10px;">方式：-10px</p> </body> </html>