使用 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.com/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.com/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.com/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.com/jsf/images/jsf-mini-logo.jpg" />
   </div>
</body>
</html>

更新于：2023-10-30

2K+ 浏览量

启动您的 职业生涯

完成课程获得认证

开始学习
广告