在 CSS 中將影象右對齊

1. 在 CSS 中使用 float 和 clear 屬性將影象右對齊一行
2. 在 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。它將下一個元素推到左右浮動元素的下方。

示例程式碼：

<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;
}