CODEWITHSUNDEEP
cssflexboxline-height
undefined
undefined

Reputation: 1138

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

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?

Upvotes: 2

Views: 564

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 2

Related Questions