5.2 设置图片的对齐方式
一个凌乱的图文网页，是每一个浏览者都不喜欢看的。而一个图文并茂，排版格式整洁简约的页面，更容易让网页浏览者接受。可见图片的对齐方式，是非常重要的。本节将介绍使用CSS3属性定义图文对齐方式。
5.2.1 案例4——设置图片横向对齐
所谓图片横向对齐，就是在水平方向上进行对齐，其对齐样式和文字对齐比较相似，都有三种对齐方式，分别为“左”“右”和“中”。
如果要定义图片的对齐方式，不能在样式表中直接定义图片样式，需要在图片的上一个标记级别，即父标记定义对齐方式，让图片继承父标记的对齐方式。之所以这样定义父标记对齐方式，是因为img（图片）本身没有对齐属性，需要使用CSS继承父标记的text-align来定义对齐方式。
【例5.4】（案例文件：ch05\5.4.html）
<!DOCTYPE html> <html> <head> <title>图片横向对齐</title> </head> <body> <p style="text-align:left"><img src="02.jpg" style="max- width:140px;">图片左对齐</p> <p style="text-align:center"><img src="02.jpg" style="max- width:140px;">图片居中对齐</p> <p style="text-align:right"><img src="02.jpg" style="max- width:140px;">图片右对齐</p> </body> </html>
在IE 11.0浏览器中浏览效果如图5-4所示，可以看到网页上显示三张图片，大小一样，但对齐方式分别是左对齐、居中对齐和右对齐。
图5-4 图片横向对齐
5.2.2 案例5——设置图片纵向对齐
纵向对齐就是垂直对齐，即在垂直方向上和文字进行搭配使用。通过对图片的垂直方向上的设置，可以设定图片和文字的高度一致。在CSS3中，对于图片纵向设置，通常使用vertical-align属性来定义。
vertical-align属性设置元素的垂直对齐方式，即定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，使用这个属性可设置单元格中的单元格内容的对齐方式。其语法格式为：
vertical-align : baseline|sub|super|top|text-top|middle|bottom|text- bottom|length
其参数含义如表5-1所示。
表5-1 纵向对齐参数含义
【例5.5】（案例文件：ch05\5.5.html）
<!DOCTYPE html>
<html>
<head>
<title>图片纵向对齐</title>
<style>
img{
max-width:100px;
}
</style>
</head>
<body>
<p>纵向对齐方式:baseline<img src=02.jpg style="vertical-align:baseline"></p>
<p>纵向对齐方式:bottom<img src=02.jpg style="vertical-align:bottom"></p>
<p>纵向对齐方式:middle<img src=02.jpg style="vertical-align:middle"></p>
<p>纵向对齐方式:sub<img src=02.jpg style="vertical-align:sub"></p>
<p>纵向对齐方式:super<img src=02.jpg style="vertical-align:super"></p>
<p>纵向对齐方式:数值定义<img src=02.jpg style="vertical-align:20px"></p>
</body>
</html>
在IE 11.0浏览器中浏览效果如图5-5所示，可以看到网页显示6张图片，垂直方向上分别是baseline、bottom、middle、sub、super和数值对齐。
图5-5 图片纵向对齐
提示
读者仔细观察图片和文字的不同对齐方式，即可深刻理解各种纵向对齐的不同之处。