在 CSS 中将图像右对齐

Subodh Poudel 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用 floatclear 属性将图像右对齐一行
  2. 在 CSS 中使用 displaymargin-left 属性将图像右对齐一行
在 CSS 中将图像右对齐

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

在 CSS 中使用 floatclear 属性将图像右对齐一行

我们可以使用 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 中使用 displaymargin-left 属性将图像右对齐一行

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

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

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

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

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

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

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

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

示例代码:

img {
 margin-left: auto;
 display: block;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - CSS Alignment

相关文章 - CSS Image