使用CSS中的text-align:center来居中图片

通常使用text-align:center来居中元素的文本。让我们来看一个示例，在这个示例中，我们使用text-align:center来居中标题。

使用CSS中的text-align属性来居中文本

在这个示例中，我们使用text-align属性来居中标题−

h1 {
   text-align: center;
}

示例

下面是居中文本的示例：

<!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:center来居中图片

在CSS中使用text-align属性居中图片

现在让我们看看如何使用text-align属性在CSS中居中图片。text-align属性的center值用于此操作 –

.myimg {
   text-align: center;
}

这是我们在div下的图片 −

<div class="myimg">
   <img src="https://www.tutorialspoint.com/jsf/images/jsf-mini-logo.jpg" />
</div>

示例

现在让我们看一个完整的示例来居中图片-

<!DOCTYPE html>
<html>
<head>
   <style>
      .myimg {
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Centering an Image</h1>
   <div class="myimg">
      <img src="https://www.tutorialspoint.com/jsf/images/jsf-mini-logo.jpg" />
   </div>
</body>
</html>