<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置图像与文字的相对位置</title>
</head>
<body>
<font size="3" color="#ff66cc">玫瑰花的生长过程</font>
<!--图像的底端与文字的底端对齐-->
<img src="images/001.gif" align="bottom"/>
<!--图像的中间与文字的中间对齐-->
<img src="images/002.gif" align="middle"/>
<!--图像的顶端与文字的顶端对齐-->
<img src="images/003.gif" align="texttop"/>
<!--图像的中间与文字的中间对齐-->
<img src="images/004.gif" align="absmiddle"/>
<!--图像的底端与文字的底端对齐-->
<img src="images/005.gif" align="baseline"/>
</body>
</html>
效果: