文字和图片的对齐方式会影响到页面的整体效果，之前没有仔细研究过。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片与文字的相对位置</title>
<style>
img{
width: 160px;
height: 126px;
margin: 10px;
}
</style>
</head>
<body>
<h3>图片与文字的相对位置</h3>
<!-- absmiddle 图片中间与同一行最大元素中间对齐；
absbottom 图片下边缘与同一行最大元素下边缘对齐；
baseline 图片下边缘与第一行文本下边缘对齐；
bottom 图像下边缘与第一行文本下边缘对齐；
left 图像沿网页左边缘对齐，文字在图像向右边换行；
middle 图像中间与第一行文本的下边缘对齐；
notset 未设定对齐方式；
right 图像沿网页的右边缘对齐，文字在图像左边换行；
texttop 图片上边缘与同一行最高文本上边缘对齐；
top 图片上边缘与同一行最高元素上边缘对齐。-->
<!--图片中间与同一行最大元素中间对齐-->
<img src="../image/ab1.jpg" align="absmiddle"/>
<!--图片下边缘与同一行最大元素下边缘对齐-->
<img src="../image/ab2.jpg" align="absbottom"/>
<!--图片下边缘与第一行文本下边缘对齐-->
<img src="../image/ab3.jpg" align="baseline"/>
<!--图像下边缘与第一行文本下边缘对齐-->
<img src="../image/ab4.jpg" align="bottom"/>
<!--图像沿网页左边缘对齐，文字在图像向右边换行-->
<img src="../image/ab5.jpg" align="left"/>
<!--图像中间与第一行文本的下边缘对齐-->
<img src="../image/ab6.jpg" align="middle"/>
<!--未设定对齐方式-->
<img src="../image/ab7.jpg" align="notset"/>
<!--图像沿网页的右边缘对齐，文字在图像左边换行-->
<img src="../image/ab8.jpg" align="right"/>
<!--图片上边缘与同一行最高文本上边缘对齐-->
<img src="../image/ab9.jpg" align="texttop"/>
<!--图片上边缘与同一行最高元素上边缘对齐-->
<img src="../image/ab10.jpg" align="top"/>
</body>
</html>页面效果如下图所示：
