css - 当每个行高不同时，如何在 flexbox 中垂直居中文本？

Question

我水平有三个文本部分，每个文本都有不同的 line-height .但是，它们应该垂直对齐。

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>

但是，当我使用 align-items 时flex，它不起作用。还有其他解决方案吗？

Answer 1

您正在寻找基线对齐

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>