-1

I'm still trying to wrap my brain around html and css, it's quite confusing. Right now I'm just messing about. Following a tutorial I created a cool navagation page. However, on my own, I'm trying to just create a simple cool heading using ::before and ::after. I can't get the text elements in the ::before or ::after styling of the h1 tag on my header to center.

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;
}

Here's what it looks like vv enter image description here

I'm trying to center the text in the red lines

Trevn Jones
  • 341
  • 2
  • 4
  • 11

1 Answers1

2

Just add this:

   text-align:center;

For example:

    .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; 
}
Dan Friedman
  • 195
  • 6