代码之家 › 专栏 › 技术社区 › Trevn Jones

CSS-在flexbox中居中显示文本内容

flexbox css html

Trevn Jones · 技术社区 · 3 年前

我还在试着把我的大脑包裹在html和css上,这很令人困惑。现在我只是在胡搅蛮缠。根据教程,我创建了一个很酷的导航页面。然而,就我自己而言,我正试图使用:before和:after创建一个简单的酷标题。我无法将标题上h1标记的::before或::after样式中的文本元素居中。

CSS:

/* ::Before Heading */
.flex-container-heading h1::before{
    content: "This is a very cool";

    /* General */
    background: red;

    /* Sizing */
    height: 10%;
    width: 100%;

    /* Text */
    color: white;
    font-size: 30;
    font-weight: 900;
}

/* Heading */
.flex-container-heading h1{
    /* General */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Text */
    color: white;
    font-size: 40;
    font-weight: 900;

}

/* ::After Heading */
.flex-container-heading h1::after{
    content: "Isn't it aye?";

    /* General */
    background: red;

    /* Sizing */
    height: 10%;
    width: 100%;

    /* Text */
    color: white;
    font-size: 30;
    font-weight: 900;
}

vv的外观如下

我正试着把文本放在红线中间

1 回复 | 直到 3 年前

Dan Friedman 3 年前

只需添加以下内容:

   text-align:center;

例如:

    .flex-container-heading h1{
    /* General */
    display: flex;
    flex-direction: column;
    align-items: center; 
    /* Text */
    color: white;
    font-size: 40;
    font-weight: 900;
    text-align:center; 
}

推荐文章