在 CSS 中居中图像

Rajeev Baniya 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 displaymargin 属性居中图像
  2. 在 CSS 中使用 text-align 属性居中图像
  3. 使用 flexbox CSS 属性将图像居中
在 CSS 中居中图像

在本文中,我们将介绍三种借助 CSS 使 HTML 中的图像居中的方法。

在 CSS 中使用 displaymargin 属性居中图像

我们可以一起使用 displaymargin CSS 属性来使图像居中。图像的 display 属性最初是 inline。因此,我们可以在一行中添加多个图像。例如,如果我们编写以下代码,我们可以看到连续的两个图像。

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

因此,我们必须将图像的 display 属性更改为 block,以便仅将一张图像放置在一行中。然后,我们可以给图像 margin0px auto 使其居中。图像的顶部和底部将有一个 0px 边距。第一个值可以是任何数字,但第二个值必须是 autoauto 为图像提供了一个边距,将其置于正中央。此过程仅在我们必须连续将一张图像居中时才有效。

例如,创建一个 HTML 文档并使用 img 标签放置一个图像。正确写入 src 值并写入 alt 以使图像因某种原因未显示时有意义。在 src 属性中使用占位符图像 https://loremflickr.com/320/240。在 CSS 中,将 display 属性设置为 block,并为其设置 0px automargin。根据我们的要求,margin 的第一个值设置为任意数字。

下面的示例显示图像居中,因为我们将 display 值设置为 block,并为其设置了 0px automargin

示例代码:

<img src="/img/DelftStack/logo.png" alt="Logo" />
img{
 display: block;
 margin: 0px auto;
}

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

我们可以使用 text-align CSS 属性将图像居中。我们可以将图像包裹在 div 中并将 text-align 属性设置为 center,然后图像将居中。这种方法可以将多张图像排成一行,与之前的方法只将一张图像居中。我们可以将这种方法用于单个和多个图像。

例如,创建一个 div 并为其指定一个 parent 类。然后,在 div 内,使用 img 标签上传图像。将 src 设置为 https://loremflickr.com/320/240,将 alt 设置为 cat。在 CSS 中,选择 div 使用其类名,即 .parent,并将其 text-align 属性设置为 center

下面的示例显示 div 内的图像居中,因为我们将 divtext-align CSS 属性设置为 center

示例代码:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.parent{
 text-align : center;
}

使用 flexbox CSS 属性将图像居中

Flexbox 是应用最广泛的 CSS 技术之一。flexbox 背后的主要思想是让容器能够改变其项目。我们可以通过将 display 属性设置为 flex 来使用容器内的 flexbox 属性。然后我们可以使用 justify-content: center 属性将容器内的项目或图像水平居中。我们可以将 align-items 属性设置为 center 以将项目垂直居中。

例如,创建一个 div 并将其命名为 container。然后使用带有 srcaltimg 标签在 div 中放置一个图像。选择 div 使用其类名,即 .container,并将其 display 属性设置为 flex。然后将 justify-content flexbox 属性设置为 center

下面的示例显示 div 内的 image 使用 flexbox 属性居中。

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>
.container{
 display: flex;
 justify-content: center;
}

相关文章 - CSS Image