Line Break between text button isn't working in h1-CodePudding

I'm trying to move the button underneath the text (which currently says "test?") but the line break(s) is doing nothing. I've googled everything I can think of and can't find anything about this so any help is appreciated!

Html and the CSS for the button if that's relevant:

.custom-button,
.custom-button:visited {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a  href="#scroll">Click Me</a>
</h1>

And a picture to show what's currently happening

EDIT: Here's the code for the header as well, it seems like the display: flex part is causing the problem but how do I centre the text vertically without that? This is all new to me, so thank you guy for the help!

h1 {
    font-size: 62px;
    font-family: "Sofia", sans-serif;
    color: cyan;
    text-align: center;
    vertical-align: middle;
    background-color: grey;
    background-repeat: no-repeat;
    background-position: center;
    margin: -10px;
    height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

CodePudding user response：

I think there is no need for the line break,
you need just to wrap the text into < p > tag

<h1>
   <p>Test?</p>
   <a  href="#scroll">Click Me</a>
</h1>

CodePudding user response：

This is caused by the combination of display: flex and justify-content: center. Flexboxes are typically used to center things, so if you don't want it centered, there is little reason to use one.

Simply remove display: flex if you want it to set underneath the text. You can also remove justify-content and align-items when you do, as neither of those will affect anything if you remove display: flex:

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a  href="#scroll">Click Me</a>
</h1>

Alternatively, if you want them both centered, you will need to apply your flex rules to both elements, along with flex-direction: column to ensure that the flexbox is vertical as opposed to horizontal:

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

h1, a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<h1>
   Test? <br>
   <a  href="#scroll">Click Me</a>
</h1>

CodePudding user response：

You can use a regular div instead of h1, like this:

<div>
   <div>Test?</div>
   <div><a  href="#scroll">Click Me</a></div>
</div>

So, divs will behave as line breaks by default (i.e. display: block). Also, you might want to add some additional styling, as well.