如何将 HTML 图像与中心对齐

在 HTML 页面上定位和对齐图像对于布局页面至关重要。最常见的问题之一是如何将图像与部分的中心对齐。在本文中，我们将讨论将图像置于中心的多种可能方式。

我在包装部分应用了一个细灰色边框，以使它们可见。

请参阅下面的在线演示和源代码。您还可以打开 Web 浏览器的开发人员工具并检查元素。

在一个段落中

在第一个示例中，我将向您展示如何将图像定位到容器元素的中心，例如 div、段落或任何其他标签。

<p class="aligncenter">
    <img src="image.jpg" alt="centered image" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

我使用了text-align: center; CSS 属性来完成这项工作。如果您熟悉CSS 代码，则不需要更多解释。

有边距

我们可以分配保证金：自动；样式到块元素以使其居中。但是我们知道图像标签是内联的，而不是块元素，所以我们必须分配一个display: block; CSS 样式使其工作。

<div>
    <img class="marginauto" src="image.jpg" alt="centered image" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

<center> 标签

< center> 标签已过时，这意味着HTML5不再支持它，但仍受Google Chrome等网络浏览器支持。
这曾经是一种首选方法，因为它不需要样式表，只需要纯 HTML。

我不想在我的文章中使用过时的元素，所以我不包括这个例子的演示。

<center>
    <img src="/image.jpg" alt="centered image" />
</center>

align=中间标签属性

另一个不需要 CSS 的过时方法，类似于前面的示例。在旧版本的 HTML 中，我们可以将分配align = “middle”标签属性的图像居中。

<img align="middle" src="image.jpg" alt="myimage" />

垂直对齐图像中心

我们已经在上面讨论了如何水平对齐图像，但可能存在需要垂直居中的情况。
要做到这一点，我们必须采取两个步骤。包装元素需要显示为表格单元格，并且垂直对齐必须设置为middle。在我的示例中，我为容器设置了一个固定高度，以确保它高于我们的图片。

<div class="verticalcenter">
    <img src="image.jpg" alt="centered image" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

水平和垂直居中

我们可以结合水平和垂直对齐，如下所示。

<div class="verticalhorizontal">
    <img src="image.jpg" alt="centered image" />
</div>

<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

我希望您今天通过阅读本文学到了一些新东西，并且您将在您即将推出的模板和设计中使用它们