資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學使用 CSS 中的 text-align: center 居中圖片
text-align: center 通常用於居中元素的文字。但是，我們也可以使用相同的text-align 屬性來居中影像。首先，讓我們看看如何居中對齊文字，然後我們將使用 text-align 居中影像。此外，我們還將水平和垂直對齊影像。
使用 CSS 中的 Text-align 屬性居中文字
讓我們首先看看如何使用 text-align 屬性居中標題：
h1 {
text-align: center;
}
示例
讓我們來看一個在 HTML 網頁上居中文字的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>
使用 CSS 中的 Text-align 屬性居中影像
我們現在將看到如何使用 CSS 中的text-align 屬性來居中影像。為此使用text-align 屬性的 center 值：
.myimg {
text-align: center;
}
我們將影像設定在 div 元素內：
<div class="myimg"> <img src="https://tutorialspoint.tw/jsf/images/jsf-mini-logo.jpg" /> </div>
示例
讓我們來看一個在 HTML 網頁上居中影像的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
text-align: center;
}
</style>
</head>
<body>
<h1>Centering an Image</h1>
<div class="myimg">
<img src="https://tutorialspoint.tw/jsf/images/jsf-mini-logo.jpg" />
</div>
</body>
</html>
水平居中影像
要使用 CSS 中的display 屬性居中影像，並將其設定為flex。水平位置使用justify-content 屬性及其值為center 來設定：
div {
display: flex;
justify-content: center;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Centering an Image Horizontally</h1>
<div>
<img src="https://tutorialspoint.tw/jsf/images/jsf-mini-logo.jpg" />
</div>
</body>
</html>
垂直居中影像
讓我們現在看看如何使用 CSS 中的display 屬性居中影像，並將其設定為flex。垂直位置使用align-items 屬性及其值為center 來設定：
div {
display: flex;
align-items: center;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<h1>Centering an Image Vertically</h1>
<div>
<img src="https://tutorialspoint.tw/jsf/images/jsf-mini-logo.jpg" />
</div>
</body>
</html>
更新於：2023-10-30
2K+ 瀏覽量
廣告