使用 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+ 瀏覽量

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告