在 CSS 中将图像右对齐 | 您所在的位置:网站首页 › 字体向右对齐怎么调整 › 在 CSS 中将图像右对齐 |
在 CSS 中使用 float 和 clear 属性将图像右对齐一行
在 CSS 中使用 display 和 margin-left 属性将图像右对齐一行
本文将讨论一些在 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。它将下一个元素推到左右浮动元素的下方。 示例代码: 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! 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; } |
CopyRight 2018-2019 实验室设备网 版权所有 |