使用 css 居中内联块-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > 学无止境 > web前端 > css >

vue react javascript angular css html

使用 css 居中内联块

作者：迹忆客最近更新：2023/04/27 浏览次数：

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

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

在此示例中，我们创建了具有父类名称的

元素。在那个

元素中，我们又添加了 3 个具有相同类名的

元素，称为 child。

此外，我们还为每个具有子类名称的

元素赋予了不同的背景颜色。

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

元素。

在输出中，用户可以看到所有三个

子元素都位于网页的中心。

html 代码：

<div class="parent">
    <div class="child" style="background-color: green">firstdiv>
    <div class="child" style="background-color: red">seconddiv>
    <div class="child" style="background-color: blue">thirddiv>
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 的

元素。之后，我们在

元素内添加了三个带有一些文本的

标签。

要在一行中显示所有段落，我们可以使用 css display:flex 属性而不是 display:inline-block 。为了让所有

元素同时居中，我们将 justify-content: center 属性应用于容器类，它是所有

元素的父类。

html 代码：

<div class="container">
    <p style="background-color: green">welcomep>
    <p style="background-color: red">to thep>
    <p style="background-color: blue">jiyikp>
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 属性来指定元素的定位方式。

例如，我们创建了一个具有外部类名的

，我们的代码包含一些具有内部类名的

元素。对于所有具有内部类名的元素，我们使用了 display: inline-block 来显示它们内联。

我们为外部类使用了 left: 50% 并将其位置设置为 absolute 以移动与其父元素相关的整个

，即 body 元素。之后，我们使用 transform: translate(-50%) 属性将类名为 outer 的

元素沿负 x 方向移动自身宽度的 50%。

这样，我们就可以将

元素与外部类名居中。

html 代码：

<div class="outer">
    <p class="inner" style="background-color: green">abcdp>
    <p class="inner" style="background-color: red">efgp>
    <p class="inner" style="background-color: blue">hijp>
div>

css 代码:

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

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

上一篇：使用 css 添加透明边框

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 bootstrap css

发布时间：2023/04/28 浏览次数：133 分类：css

本文介绍的是著名的 css ui 框架 bootstrap。我们将讨论使用自定义样式覆盖 bootstrap css 的过程。

使用 css 制作带圆角的 html 表格

发布时间：2023/04/28 浏览次数：245 分类：css

这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

css 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：140 分类：css

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

发布时间：2023/04/28 浏览次数：265 分类：css

在本文中，用户将学习仅使用 css 将

使用 css 添加透明边框

发布时间：2023/04/28 浏览次数：525 分类：css

在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 css 向上移动文本

发布时间：2023/04/28 浏览次数：704 分类：css

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

发布时间：2023/04/28 浏览次数：233 分类：css

本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。

css 防止文本选择

发布时间：2023/04/28 浏览次数：81 分类：css

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 web 浏览器使用该属性。

css 使用浮动居中元素

发布时间：2023/04/28 浏览次数：217 分类：css

本文主要讨论如何使用css实现浮动元素居中。 float 属性通常设置为左值或右值，而不是中心值。本文将讨论浮动元素如何居中的几个技巧

使用 css 居中内联块-ag捕鱼王app官网