How to center text into 2 divs with flexbox

Question

Hello I have two managed by flexbox, but I do not understand how to put text vertically aligned.

You can see result here: https://www.w3schools.com/code/tryit.asp?filename=GKEFJJF780BU

You can also see a snippet of code here:

.barralanding {
  display: flex;
  flex-direction: row;
    
    /*width:100%;
    display:table;*/
}

.landing-foto {
  background-color: dodgerblue;
  flex: 50%;

    /*width:50%;
    display:table-cell;
    vertical-align:middle;
    background:   url("images/foto-land-dovedormire.jpg") no-repeat center;
    background-size: cover;*/
    height:420px;
}

.landing-testo {
  background-color: #369;
  flex: 50%;

    /*width:50%;
    display:table-cell;
    vertical-align:middle;
    background-color:#f0ca9c;*/
    background-color:#06C;
    
    padding:20px 30px 20px 30px;
    box-sizing:border-box;

}

.landing-testo h4{
    font: normal normal 1.9em 'Poppins', sans-serif;
    font-weight:800;
    color:white;
    text-align:left;
    background:   url("images/rigasottowth-h1.gif") no-repeat bottom left;
    padding-bottom:15px;
    margin:0px;
}
.landing-testo p{
    font: normal normal 1.0em 'Poppins', sans-serif;
    color:white;
    width:80%;
}
.landing-testo p.big{
    font: italic normal 1.2em 'Poppins', sans-serif;
    text-align:center;
}





/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .barralanding {
    flex-direction: column;
  }
  
  .landing-foto {
    order: 1;
  }
  
}

<div class="barralanding">
  <div class="landing-foto">1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2</div>
  <div class="landing-testo">2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh alksjkh alkjjh aadkljjhf ajk1</div>
  
</div>

Do you know how to vertically align the text - at least - in one div?

Many thanks.

Answer 1

With flex, you can create a .center class to center your content:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

But if you can use grid, it's even simpler:

.center {
  display: grid;
  place-items: center;
}

To fix your problem, you can choose either center method from the above and change your HTML to:

<div class="barralanding">
  <div class="landing-foto center">
    1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2
  </div>
  <div class="landing-testo center">
    2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh
    alksjkh alkjjh aadkljjhf ajk1
  </div>
</div>

.center {
  display: grid;
  place-items: center;
}

.barralanding {
  display: flex;
  flex-direction: row;
}

.landing-foto {
  background-color: dodgerblue;
  flex: 50%;
  height: 420px;
}

.landing-testo {
  background-color: #369;
  flex: 50%;
  background-color: #06c;
  padding: 20px 30px 20px 30px;
  box-sizing: border-box;
}

<div class="barralanding">
  <div class="landing-foto center">
    1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2
  </div>
  <div class="landing-testo center">
    2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh alksjkh alkjjh aadkljjhf ajk1
  </div>
</div>