html图片和文字对齐

HTML中的图片和文字对齐可以通过CSS样式来控制。主要有以下几种常见的对齐方式：

1. 左对齐 (`text-align: left;`)：默认情况下，文本会从左边开始，图片会紧贴着文本左侧。

2. 居中 (`text-align: center;`)：将图片和文字都设置为居中对齐，它们会在其容器内水平分布并保持中间位置。

3. 右对齐 (`text-align: right;`)：图片和文字都会向页面的右侧靠拢。

4. 图片左对齐，文字环绕 (`float` 或 `display: inline-block`)：通过浮动属性让图片左对齐，然后使用`clear`清除浮动，可以创建图文混排的效果。

5. 使用Flexbox或Grid布局：现代前端开发通常更倾向于使用 Flexbox 或 CSS Grid 进行布局，可以方便地控制元素之间的间距、排列和对齐。

为了实现对齐，你可以将图片放在段落（`<p>`标签）或容器（如`<div>`）中，并添加相应的CSS样式。例如：

<div class="aligner">
  <img src="your-image.jpg" alt="图片描述" style="float: left;">
  <p style="text-align: right;">这是右对齐的文字</p>
</div>

其中 `.aligner` 类需要配合CSS定义：

.aligner {
  display: flex;
  justify-content: space-between;
}