在 CSS 中居中影象

Rajeev Baniya 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 displaymargin 屬性居中影象
  2. 在 CSS 中使用 text-align 屬性居中影象
  3. 使用 flexbox CSS 屬性將影象居中
在 CSS 中居中影象

在本文中,我們將介紹三種藉助 CSS 使 HTML 中的影象居中的方法。

在 CSS 中使用 displaymargin 屬性居中影象

我們可以一起使用 displaymargin CSS 屬性來使影象居中。影象的 display 屬性最初是 inline。因此,我們可以在一行中新增多個影象。例如,如果我們編寫以下程式碼,我們可以看到連續的兩個影象。

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

因此,我們必須將影象的 display 屬性更改為 block,以便僅將一張影象放置在一行中。然後,我們可以給影象 margin0px auto 使其居中。影象的頂部和底部將有一個 0px 邊距。第一個值可以是任何數字,但第二個值必須是 autoauto 為影象提供了一個邊距,將其置於正中央。此過程僅在我們必須連續將一張影象居中時才有效。

例如,建立一個 HTML 文件並使用 img 標籤放置一個影象。正確寫入 src 值並寫入 alt 以使影象因某種原因未顯示時有意義。在 src 屬性中使用佔位符影象 https://loremflickr.com/320/240。在 CSS 中,將 display 屬性設定為 block,併為其設定 0px automargin。根據我們的要求,margin 的第一個值設定為任意數字。

下面的示例顯示影象居中,因為我們將 display 值設定為 block,併為其設定了 0px automargin

示例程式碼:

<img src="/img/DelftStack/logo.png" alt="Logo" />
img{
 display: block;
 margin: 0px auto;
}

在 CSS 中使用 text-align 屬性居中影象

我們可以使用 text-align CSS 屬性將影象居中。我們可以將影象包裹在 div 中並將 text-align 屬性設定為 center,然後影象將居中。這種方法可以將多張影象排成一行,與之前的方法只將一張影象居中。我們可以將這種方法用於單個和多個影象。

例如,建立一個 div 併為其指定一個 parent 類。然後,在 div 內,使用 img 標籤上傳影象。將 src 設定為 https://loremflickr.com/320/240,將 alt 設定為 cat。在 CSS 中,選擇 div 使用其類名,即 .parent,並將其 text-align 屬性設定為 center

下面的示例顯示 div 內的影象居中,因為我們將 divtext-align CSS 屬性設定為 center

示例程式碼:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.parent{
 text-align : center;
}

使用 flexbox CSS 屬性將影象居中

Flexbox 是應用最廣泛的 CSS 技術之一。flexbox 背後的主要思想是讓容器能夠改變其專案。我們可以通過將 display 屬性設定為 flex 來使用容器內的 flexbox 屬性。然後我們可以使用 justify-content: center 屬性將容器內的專案或影象水平居中。我們可以將 align-items 屬性設定為 center 以將專案垂直居中。

例如,建立一個 div 並將其命名為 container。然後使用帶有 srcaltimg 標籤在 div 中放置一個影象。選擇 div 使用其類名,即 .container,並將其 display 屬性設定為 flex。然後將 justify-content flexbox 屬性設定為 center

下面的示例顯示 div 內的 image 使用 flexbox 屬性居中。

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.container{
 display: flex;
 justify-content: center;
}

相關文章 - CSS Image