資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究如何使用 CSS 使影像居中？
為了使影像在網頁上居中，我們使用了 display、margin-left 和 margin-right 屬性。首先讓我們瞭解 display 屬性。
Display 屬性
將一個元素設定為塊級元素，把 display 屬性設定為 block。在本例中，我們的元素是一個影像 −
display: block;
Margin-left 屬性
使用 CSS 中的 margin-left 屬性設定元素的左外邊距。我們已經設定了圖片的左外邊距為 auto，允許瀏覽器計算左外邊距 −
margin-left: auto;
Margin-right 屬性
使用 CSS 中的 margin-right 屬性設定元素的右外邊距。我們已經設定了圖片的右外邊距為 auto，允許瀏覽器計算左外邊距 −
margin-right: auto;
使影像居中
應用上述所有屬性於影像，以使影像居中 −
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
示例
以下程式碼透過 CSS 使影像居中 −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Example of centering an image</h1>
<img src="https://tutorialspoint.tw/compiler_design/images/compiler-design-mini-logo.jpg">
</body>
</html>
更新於：2023 年 11 月 16 日
525 次瀏覽
廣告