Cannot add text under CSS div element

Question

I'm trying to put text under a div CSS element on HTML, but no matter what I do, the text goes to the right. How can I fix it, so it is under the box and centered?

HTML:

<div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>

<h1>&nbsp;</h1>
<h1>&nbsp;</h1>

<h1><span style="color: #ffffff;">Testing</span></h1>

CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:200');

html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #1D1F20;
}
#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Montserrat';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

The exact problem I have can be found here.

I would really appreciate any help. Thanks.

score 0 · Answer 1 · answered May 18 '22 at 20:01

0

Add body style - flex-direction: column

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: #1d1f20;
        flex-direction: column;
      }

answered May 18 '22 at 20:01

Rahil Ali

276
1
15

score 0 · Answer 2 · answered May 18 '22 at 20:01

As I dont have the full HTML, I will make the assumption that the HTML you give is inside the body:

You're using "display: flex" on the body, so everything is going to be placed horizontally, as it's the default behaviour for flex elements.

If you want to have it vertically, you should add this to your body CSS:

flex-direction: column;

score 0 · Answer 3 · answered May 18 '22 at 20:02

You could wrap it all in another div and use display: flex; flex-direction: column

Like:

<div style="display: flex" "flex-direction: column">
  <div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>

  <h1>&nbsp;</h1>
  <h1>&nbsp;</h1>

  <h1><span style="color: #ffffff;">Testing</span></h1>
</div>

Cannot add text under CSS div element

3 Answers3