迹忆客 专注技术分享

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。 之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 text-align CSS 属性使内联块居中

在此示例中，我们创建了具有父类名称的 <div> 元素。 在那个 <div> 元素中，我们又添加了 3 个具有相同类名的 <div> 元素，称为 child。

此外，我们还为每个具有子类名称的 <div> 元素赋予了不同的背景颜色。

在这里，我们为每个具有类名 child 的元素设置了 display:inline-block。 为了使所有元素居中，我们将 text-align: center 属性应用于具有类名 parent 的父 <div> 元素。

在输出中，用户可以看到所有三个 <div> 子元素都位于网页的中心。

HTML 代码：

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

CSS 代码:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

使用 justify-content 和 display CSS 属性使内联块居中

我们将在这部分使用 justify-content 和 display CSS 属性。 我们可以使用 justify-content 属性的 center 值来使元素的整个内容居中。

例如，我们创建了类名为 container 的 <div> 元素。 之后，我们在 <div> 元素内添加了三个带有一些文本的 <p> 标签。

要在一行中显示所有段落，我们可以使用 CSS display:flex 属性而不是 display:inline-block 。 为了让所有 <p> 元素同时居中，我们将 justify-content: center 属性应用于容器类，它是所有 <p> 元素的父类。

HTML 代码：

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">Jiyik</p>
</div>

CSS 代码:

.container {
    font-size: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

使用 left、position 和 transform CSS 属性

我们将使用 left 、position 和 transform CSS 属性将所有带有 display: inline-block 的元素居中。 left 属性允许我们设置元素的左侧位置。

transform 属性根据我们的要求将元素从其位置移动。 我们可以使用 position 属性来指定元素的定位方式。

例如，我们创建了一个具有外部类名的 <div>，我们的代码包含一些具有内部类名的 <p> 元素。 对于所有具有内部类名的元素，我们使用了 display: inline-block 来显示它们内联。

我们为外部类使用了 left: 50% 并将其位置设置为 absolute 以移动与其父元素相关的整个 <div> ，即 body 元素。 之后，我们使用 transform: translate(-50%) 属性将类名为 outer 的 <div> 元素沿负 x 方向移动自身宽度的 50%。

这样，我们就可以将 <div> 元素与外部类名居中。

HTML 代码：

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

CSS 代码:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

在本文中，我们学习了使用 display: inline-block 使元素居中的各种方法。