img 文本对齐 - Html

在 HTML 中，我们可以使用 img 标签来插入图片。然而，有时候我们需要将文本与图片对齐，这就需要使用一些 CSS 属性来实现。

居中对齐

要将图片居中对齐，可以使用以下 CSS 属性：

img {
  display: block;
  margin: 0 auto;
}

这将使图片在水平方向上居中对齐，而在垂直方向上与文本对齐。

左对齐和右对齐

如果你想将图片左对齐或右对齐，并且让文本围绕着图片流动，可以使用以下 CSS 属性：

img.align-left {
  float: left;
  margin-right: 10px;
}

img.align-right {
  float: right;
  margin-left: 10px;
}

在这个例子中，我们分别使用 align-left 和 align-right 作为类名，然后使用对应的 CSS 属性来定义图片的对齐方式。

自定义对齐方式

如果以上默认的对齐方式无法满足你的需求，你可以使用 position 属性来自定义对齐方式。以下是一个例子：

img.custom-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

在这个例子中，我们首先将 position 属性设为 relative，这样可以将图片相对于文本进行定位。然后，我们使用 left: 50% 将图片左边缘移动到父元素的中点位置。最后，我们使用 transform: translateX(-50%) 将图片向左平移自身宽度的一半，从而使其居中对齐。

通过使用这些 CSS 属性，你可以轻松地实现不同对齐方式的图片和文本组合效果。

希望这份介绍对你有所帮助！