在 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