数据结构
网络
关系数据库管理系统 (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.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+ 浏览量
广告