How to center text into 2 divs with flexbox [duplicate]

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top