HTML 网页怎么设置图片对齐方式

在HTML网页里插入图片后，经常需要调整图片的对齐方式，比如和文字左对齐、右对齐、居中对齐，方法有好几种，新手选简单的来就行。

第一种方法是直接在img标签里加align属性，这是最直接的。比如想让图片左对齐，代码是 `<img src="xxx.jpg" alt="图片" align="left">`；右对齐就是 `align="right"`；居中对齐是 `align="center"`。这种方法简单粗暴，适合快速调整单个图片。

第二种方法是用CSS样式，比align属性更灵活。比如想让图片居中对齐，可以给img标签加style属性： `<img src="xxx.jpg" alt="图片" style="display: block; margin: 0 auto;">`。display: block是把图片变成块级元素，margin: 0 auto是让左右边距自动相等，从而实现居中。

如果想让图片和文字混排时对齐，比如文字围绕图片，就可以用float属性。左浮动让文字在图片右边： `<img src="xxx.jpg" alt="图片" style="float: left; margin-right: 10px;">`；右浮动让文字在图片左边： `<img src="xxx.jpg" alt="图片" style="float: right; margin-left: 10px;">`。margin属性是给图片和文字之间留一点间距，看起来更美观。

设置完之后，刷新网页就能看到效果，如果没生效，检查一下代码有没有写错，比如属性名有没有拼错、引号有没有闭合。平时做网页排版，多试试这几种方法，很快就能熟练掌握，也可以参考 响应式手机网站制作教程里的排版技巧。