html与图片对齐

图片与文本对齐的常见方法

使用 <img> 标签的 align 属性（已废弃）

注意：align 属性在 HTML5 中已被废弃，建议使用 CSS 实现。

通过 CSS vertical-align 属性控制

代码示例：

<p>
  <img src="image.jpg" style="vertical-align: middle;">
  与图片垂直居中的文本
</p>

图片作为块级元素居中对齐

通过 CSS 设置 display: block 和 margin 实现居中：

<div style="text-align: center;">
  <img src="image.jpg" style="display: block; margin: 0 auto;">
  <span>居中对齐的文本</span>
</div>

使用浮动（Float）实现图文混排

• 左浮动：文本环绕图片右侧。
• 右浮动：文本环绕图片左侧。

代码示例：

<style>
  .float-left { float: left; margin: 5px; }
  .float-right { float: right; margin: 5px; }
</style>
<img src="image.jpg" class="float-left" alt="左浮动图片">
<p>图片左侧的文本内容，会自动环绕图片。</p>

Flexbox 实现灵活对齐

通过 display: flex 控制对齐方式：

<style>
  .flex-container {
    display: flex;
    align-items: center; / 垂直居中 /
    justify-content: center; / 水平居中 /
  }
</style>
<div class="flex-container">
  <img src="image.jpg" alt="图片">
  <span>Flexbox 居中对齐的文本</span>
</div>

常见问题与解答

问题1：为什么图片下方总有空白间隙？

解答：
图片默认是 inline-block 元素，基线对齐时会保留少量空白,解决方法：

• 添加 vertical-align: top/bottom/middle 属性。
• 将图片设置为 display: block，并清除默认 margin：

  img {
    display: block;
    margin: 0;
  }

问题2：如何让多张图片在一行内垂直居中？

解答：
使用 Flexbox 布局，设置 align-items: center：

<style>
  .container {
    display: flex;
    align-items: center; / 垂直居中 /
  }
  .container img { margin-right: 10px; }
</style>
<div class="container">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <span>多图居中对齐的文本</span>
</div>