How can I vertically center text within flexbox when each line-height is different?

Question

I have three text section horizontally and each text has different line-height. But, they should be vertically aligned.

div {
  display: flex;
  align-items: center;
  width: 300px;
  background-color: skyblue;
}

p {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

p:first-child {
  line-height: 1.33;
}

p:nth-child(2) {
  line-height: 1.65;
}

<div>
  <p>texttext1</p>
  <p>texttext2</p>
  <p>texttext3</p>
</div>

However, when I use align-items of flex, it doesn't work. Is there other solutions?

They seem to be aligning vertically already? Even if you set one of the line heights to an extreme value, they still align the same don't they? — Ari Seyhun, Feb 24 '21 at 06:24
@Acidic9 Did you run my code? It isn't vertically aligned (middle) I edited — undefined, Feb 24 '21 at 06:27

score 2 · Answer 1 · answered Feb 24 '21 at 08:19

You are looking for a baseline alignment

div {
  display: flex;
  align-items: baseline;
  width: 300px;
  background-color: skyblue;
}

p {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

p:first-child {
  line-height: 1.33;
}

p:nth-child(2) {
  line-height: 1.65;
}

<div>
  <p>texttext1</p>
  <p>texttext2</p>
  <p>texttext3</p>
</div>

How can I vertically center text within flexbox when each line-height is different?

1 Answers1