版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JEYMING/article/details/80286283
<!--
图像与多媒体文件
图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法
2018.01.06
-->
<html>
<head>
<meta charset="UTF-8" />
<title>图像与多媒体文件</title>
<style type="text/css">
img{
width:150px;
height:100px;
}
</style>
</head>
<body>
<!--
6.1.5 设置图像对齐方式
水平：left、right、center
垂直：top、middle、bottom
-->
<h3>图像的对齐方式</h3>
<h4 align="center" >设置图像的对齐方式</h4>
<hr color="#009933">
<table border="1">
<tr align="center">
<td>图像垂直对齐方式</td>
<td>图像水平对齐方式</td>
</tr>
<tr>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="top">[top]图像顶部与同行的文字顶部对齐，当前行高度相应扩大</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="left">[left]图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化</td>
</tr>
<tr>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="middle">[middle]图像水平中线与同行的文字中线对齐，当前行高度相应扩大</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="center">[center]图像中线和当前的文字中线对齐，当前行高度相应扩大</td>
</tr>
<tr>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="bottom">[bottom]图像底部与同行的文字底部对齐，当前行高度相应扩大</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png" align="right">[right]图像右对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化</td>
</tr>
</table>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
</body>
</html>