在 CSS 中居中影象
在本文中,我們將介紹三種藉助 CSS 使 HTML 中的影象居中的方法。
在 CSS 中使用 display
和 margin
屬性居中影象
我們可以一起使用 display
和 margin
CSS 屬性來使影象居中。影象的 display
屬性最初是 inline
。因此,我們可以在一行中新增多個影象。例如,如果我們編寫以下程式碼,我們可以看到連續的兩個影象。
<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" />
因此,我們必須將影象的 display
屬性更改為 block
,以便僅將一張影象放置在一行中。然後,我們可以給影象 margin
的 0px auto
使其居中。影象的頂部和底部將有一個 0px
邊距。第一個值可以是任何數字,但第二個值必須是 auto
。auto
為影象提供了一個邊距,將其置於正中央。此過程僅在我們必須連續將一張影象居中時才有效。
例如,建立一個 HTML 文件並使用 img
標籤放置一個影象。正確寫入 src
值並寫入 alt
以使影象因某種原因未顯示時有意義。在 src
屬性中使用佔位符影象 https://loremflickr.com/320/240
。在 CSS 中,將 display
屬性設定為 block
,併為其設定 0px auto
的 margin
。根據我們的要求,margin
的第一個值設定為任意數字。
下面的示例顯示影象居中,因為我們將 display
值設定為 block
,併為其設定了 0px auto
的 margin
。
示例程式碼:
<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 內的影象居中,因為我們將 div
的 text-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
。然後使用帶有 src
和 alt
的 img
標籤在 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;
}