vertical centering with flexbox does not deliver the texts under each other

Question

I would like to center the text vertically. The problem is the text is side by side and not one below the other. And the text should still be below each other like normal HTML and not next to each other

html

<div>
  <div class="hero-section">
    <div class="hero-text">Some text</div>
   
  </div>
</div>

scss

.hero-section {
    background-image: url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: left;

    .hero-text {
        color: #fff;
        vertical-align: middle;
        display : flex;
        justify-content: center;
    }
}

So I looked at Central align of elements CSS without flexbox

in my html

  <div class="hero-section">
    <div class="hero-row">
    <div class="hero-text">
      <h1>Title</h1>
      <h5>Title</h5>
      <h6>Title</h6>
     </div>
      </div>
  </div>

in my scss

.hero-section {
    background-image: url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: left;

    .hero-row {
        display:table-cell
    }

    .hero-text {
        display: table;
        color: #fff;
        vertical-align: middle;
        display : flex;
    }
}

But it still don't work

You need to add `flex-direction: column` to the parent element — dantheman, Jun 20 '21 at 19:49

score 0 · Accepted Answer · answered Jun 20 '21 at 19:50

try this;

 <style>
      .hero-section {
        background-image: url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
        margin: auto;
      }
      .hero-text {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    </style>
    <div>
      <div class="hero-section">
        <div class="hero-text">Some text</div>
      </div>
    </div>

vertical centering with flexbox does not deliver the texts under each other

1 Answers1