如果您使用过 HTML 和 CSS，您就会知道在 HTML 中处理图像是多么令人沮丧，尤其是如何在 HTML 中使图像居中。 问题在于 标签是一个内联元素并且与块元素的工作方式不同，这使得它很难轻松地居中对齐。 如果您是尝试学习 HTML 和 CSS 的初学者，并且处理图像对齐似乎是您生活中最大的问题，那么您并不孤单。 许多开发人员通常都难以处理图像，更不用说图像对齐了。 但是您不必担心，因为在本文中我们将展示所有不同的方法来回答这个问题，如何在 HTML 中将图像居中？
先决条件
在我们继续之前，您应该先了解一些 HTML 的基本概念，尤其是内联元素和块元素。 你可以在这里了解更多关于它们的信息——
如何在 HTML 中将图像居中
我们在 HTML 中使用 标签来将图像添加到我们的网页，但问题是
标签是一个内联元素，这使得它很难轻易对齐。 我们可以使用以下任何一种方法并在 HTML 中完美地居中图像。
- 我们可以使用 属性的text-align 属性 style 并将其设置为 center 。
- 我们可以通过将图像转换为块级元素来对齐图像
- 我们可以使用
标签来对齐一个特定的图像。 - 我们可以使用 CSS flexbox 特性
- 我们还可以使用 CSS 网格 功能
让我们看一个例子。
输出：
正如我们所看到的，我们的图像相对于我们的页面是完美居中的。 现在让我们更深入地了解每种方法。
方法一：使用样式属性
我们可以在 HTML 中使用 的text-align style 属性中 属性将图像居中并将其设置为中心。 这将使标签内的所有内容居中。
注意 ：有一个小问题， text-align 属性仅适用于块元素，而 img 是内联元素。 好吧，一个快速的解决方法是将 img 标签包裹在块元素（例如 div ）中，并使用该 div 上的 text-align 属性 使 图像居中。
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Centering an image in HTML using the Style Attribute</title>
</head>
<body>
<h1>Aligning an Image in center</h1>
<p>In this example, the image is wrapped in a block-type element, for ex. a div tag. The div is styled with the text-align property to center the image below. </p>
<!--Centered Image Start-->
<div style="text-align: center;">
<img width="400" src="https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872__340.jpg">
</div>
<!--Centered Image End-->
<p>This is the simplest but most limited method.</p>
</body>
</html>
注意： 我们已经在 HTML 代码中将 文本对齐 属性设置为 居中 。 添加下面提供的 CSS 只是为了使输出看起来更好。
CSS：
/We have already set the text-align property as center in the HTML code. Below provided CSS is added just to make the output look better./
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Avenir', sans-serif;
color: #33475b;
}
img{
padding: 10px;
}
输出：
方法 2：将 img 标签转换为块级元素
在 HTML 中使图像居中的另一种方法是将 img 标签（内联标签）转换为块级标签。 这可以通过将 的显示属性 CSS 中 设置为块来完成。 完成后，我们可以简单地将 margin 属性 设置为 auto，这会将图像左右两侧的所有空间均分，完美居中。
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Centering an image in HTML by converting the `img` tag to a block-level element</title>
</head>
<body>
<h1>Centering an Image with the Display Property</h1>
<p>In this example, the CSS display properties are used to center the image below.</p>
<!--Centered Image Start-->
<img width="400" src="https://cdn.pixabay.com/photo/2018/06/08/00/48/developer-3461405__340.png">
<!--Centered Image End-->
<p>Once the display property is set to "block" and the image width to a fixed percentage, text-align property is set to center which will center align our image with respect to the viewport.</p>
</body>
</html>
CSS：
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Avenir', sans-serif;
color: #33475b;
}
/ Centered Image Code /
img {
display: block;
width: 60%;
margin: auto;
}
输出：
方法 3：使用
如果我们想在页面上居中放置一个特定的图像，我们可以使用
注意： 此方法可能不适用于某些浏览器并且已被弃用，因为它可能已从相关 Web 标准中删除或可能正在被删除。
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Centering an image in HTML using the <center> tag</title>
</head>
<body>
<h1>Centering an Image with the center tag</h1>
<p>In this example, we will use the center tag to center align our image </p>
<!--Centered Image Start-->
<center><img width="400" src="https://cdn.pixabay.com/photo/2018/05/04/20/01/website-3374825__340.jpg"></center>
<!--Centered Image End-->
<p>The image is wrapped in a center tag. Please note that this method might not work on some browsers so we advise you to not use this method unless all the other methods don't work for you either.</p>
</body>
</html>
注意： 我们已经 使用了center 在 HTML 代码中 标签。 添加下面提供的 CSS 只是为了使输出看起来更好。
CSS：
/We have already used the `center` tag in the HTML code. Below provided CSS is added just to make the output look better./
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Avenir', sans-serif;
color: #33475b;
}
输出：
方法四：使用 CSS Flexbox
flexbox 的引入使得控制图像的位置和正确居中变得更加容易。 我们需要做的就是将我们的图像放在一个容器中，例如 div 并将该容器的 显示属性 设置为 flex 。 然后只需选择 justify-content 属性作为 center 。 让我们看一个例子。
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title></title>
</head>
<body>
<h1>Centering an Image in HTML with the Flex Property</h1>
<p>In this example, the CSS flex property is used to center the image below. </p>
<!--Centered Image Start-->
<div>
<img width="400" src="https://cdn.pixabay.com/photo/2018/02/26/06/20/software-developer-3182374__480.jpg">
</div>
<!--Centered Image End-->
<p>The image is wrapped in a div element. The display property is set to "flex" and justify-content property to "center." The width of the image is then set to a fixed length value.</p>
</body>
</html>
CSS：
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Avenir', sans-serif;
color: #33475b;
}
/ Centered Image Code /
div {
display: flex;
justify-content: center;
}
输出：
方法 5：使用 CSS 网格
我们可以使用 CSS 网格将图像居中，方法是将图像包装在容器（例如 div ）中，然后将该容器的 显示属性 设置为 grid 。 然后将 place-items 属性设置为 中心 ，我们就完成了。 让我们看一个例子。
HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Centering an Image with the Grid Property</title>
</head>
<body>
<h1>Centering an Image with the Grid Property</h1>
<p>In this example, the CSS flex property is used to center the image below. </p>
<!--Centered Image Start-->
<div>
<img width="400" src="https://cdn.pixabay.com/photo/2022/06/01/16/26/software-7236161__340.png">
</div>
<!--Centered Image End-->
<p>The image is wrapped in a div element. The display property is set to "grid" and place-items property to "center." The width of the image is then set to a fixed length value.</p>
</body>
</html>
CSS：
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Avenir', sans-serif;
color: #33475b;
}
/ Centered Image Code /
div {
display: grid;
place-items: center;
}
输出：
结论
标签是 内联 标签。
- 我们可以将 img 标签包裹在块类型标签（例如 div 标签）中，并将 text-align 属性设置为居中。
- 我们可以通过将显示属性更改为块来将内联 img 标签转换为块标签。
- 我们还可以将我们的 img 标签 包裹在center 标签内，这将使该特定图像居中。
感谢您的阅读！
