<p><img src="pic.jpg" alt="图片"></p>使用 align 属性从左边对齐：
<p><img src="pic.jpg" alt="图片" align="left"></p>使用 align 属性从右边对齐：
<p><img src="pic.jpg" alt="图片" align="right"></p>二、CSS 样式 CSS 提供了更强大的样式控制功能，可以通过设置图片的样式来实现更多的位置设置。 1. 使用 float 属性设置图片浮动 通过 float 属性可以让图片浮动到文本的左边或右边。 下面是一个演示案例：
<style>
img{float:left;}
</style>
<p><img src="pic.jpg" alt="图片"> 这是一段文本 </p>
使用 float 属性将图片浮动到右边：
<style>
img{float:right;}
</style>
<p><img src="pic.jpg" alt="图片"> 这是一段文本 </p>
2. 使用 position 属性设置图片绝对定位
通过 position 属性可以将图片绝对定位到指定的位置，可以设置其 top、left、bottom、right 等位置属性的值。
下面是一个演示案例：
<style>
img {
position: absolute;
top: 50px;
left: 50px;
}
</style>
<body>
<p>这是一段文本</p>
<img src="pic.jpg" alt="图片">
</body>
3. 使用 margin 属性设置图片外边距
通过 margin 属性可以设置图片的外边距，实现位置的调整。
下面是一个演示案例：
<style>
img {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
}
</style>
<p><img src="pic.jpg" alt="图片"></p>
通过这些方法可以轻松地控制 HTML 中的图片位置，提高 Web 设计的效率和美观度。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
