在 CSS 中居中图像
在本文中,我们将介绍三种借助 CSS 使 HTML 中的图像居中的方法。
在 CSS 中使用 display
和 margin
属性居中图像
我们可以一起使用 display
和 margin
CSS 属性来使图像居中。图像的 display
属性最初是 inline
。因此,我们可以在一行中添加多个图像。例如,如果我们编写以下代码,我们可以看到连续的两个图像。
<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" />
因此,我们必须将图像的 display
属性更改为 block
,以便仅将一张图像放置在一行中。然后,我们可以给图像 margin
的 0px auto
使其居中。图像的顶部和底部将有一个 0px
边距。第一个值可以是任何数字,但第二个值必须是 auto
。auto
为图像提供了一个边距,将其置于正中央。此过程仅在我们必须连续将一张图像居中时才有效。
例如,创建一个 HTML 文档并使用 img
标签放置一个图像。正确写入 src
值并写入 alt
以使图像因某种原因未显示时有意义。在 src
属性中使用占位符图像 https://loremflickr.com/320/240
。在 CSS 中,将 display
属性设置为 block
,并为其设置 0px auto
的 margin
。根据我们的要求,margin
的第一个值设置为任意数字。
下面的示例显示图像居中,因为我们将 display
值设置为 block
,并为其设置了 0px auto
的 margin
。
示例代码:
<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 内的图像居中,因为我们将 div
的 text-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
。然后使用带有 src
和 alt
的 img
标签在 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;
}