迹忆客 专注技术分享

本文将讨论一些在 CSS 中将图像右对齐的方法。

在 CSS 中使用 float 和 clear 属性将图像右对齐一行

我们可以使用 float 属性来指定元素在 CSS 中的浮动位置。

例如，当我们在 HTML 中插入图像并在图像下方写一个段落时，我们可以使图像浮动到段落的左侧或右侧。通过这种方式，我们可以使文本出现在图像旁边。

我们可以将 float 属性设置为 right 以在 CSS 中将图像与段落的右侧对齐。但是，如果我们必须将段落推到图像下方，clear 属性会派上用场。

该属性定义了浮动元素下方元素的流动。当使用 clear 属性的 right 选项时，元素将被推到右浮动图像下方。

因此，我们可以右对齐图像并从下一行开始段落。图像左侧将有一个空白区域。

例如，在 HTML 中使用 img 标签插入图像。在 img 标签旁边，写一个 p 标签并在其中填写一些文本。

在 CSS 中选择 img 标签并应用 float 属性。将选项 right 设置为 float 属性。接下来，选择 p 标签并将 clear 属性设置为 right。

在这里，图像将与网页的右侧对齐。图片旁边不会有文字。

如果我们没有使用 clear 属性，文本将出现在图像的左侧。我们使用 clear 属性将文本推送到图像下方。

我们还可以为 clear 属性设置选项 both。它将下一个元素推到左右浮动元素的下方。

示例代码：

<img src="/img/DelftStack/logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nihil, vitae placeat molestias inventore, numquam eveniet illo optio, sint excepturi nam? Ut dolor ratione aut tenetur, a aliquid natus tempore!
</p>

img{
 float:right;
}

p{
 clear:right;
}

在 CSS 中使用 display 和 margin-left 属性将图像右对齐一行

在此方法中，我们将讨论另一种将图像向右对齐并将文本推送到另一行的方法。

我们可以使用 display 和 margin-left 属性来实现我们的目标。我们可以使用 margin-left 属性将边距设置在图像的左侧，并将图像推到网页的右侧。

我们可以使用 auto 选项来实现它。我们可以通过将图像设置为块元素来强制文本到下一行。我们可以使用 display 属性来做到这一点。

在本例中，我们将使用第一种方法中使用的 HTML 结构。例如，选择 img 标签并将 margin-left 属性设置为 auto。然后，将 block 选项应用于 display 属性。

在这里，auto 选项将设置图像的左边距。图像将根据其大小占用空间。

然后，浏览器将计算剩余空间并将该空间设置为左边距。因此，图像是右对齐的。

将 display 属性设置为 block 将使块级元素。这意味着图像将占据整行。

图像的下一个元素将被推送到下一行。因此，我们可以使用右边的 display 和 margin-left 属性来对齐图像并将文本移动到下一行。

示例代码：

img {
 margin-left: auto;
 display: block;
}