html - 如何仅在父 div 上保持行高？

Question

我有一排 3 个元素:

<div class="header">
    <div class="item-one">
        <p>text here <span> more text here </span> </p>
    </div>
    <div class="item-two">
        <img src="">
    </div>
    <div class="item-three">
    <img src="">
    </div>
</div>

因此，我使用 line-height 将它们垂直居中:

.header {
   line-height: 100px;
}

看起来完全像这样:

我的问题是我希望我的 item-one 文本在两行中，因此，我想将 item-one 转换为:

<div class="item-one">
    <div class="one">text here</div>
    <div class="two">more text here</div>
</div>

问题是每个文本 block 现在都有一个固有的 100px 行高，使其看起来像这样:

现在，我认为这会发生在彼此 div 下的任何两个元素上，而不仅仅是文本，因为每个元素都继承了行高，因此:

如何仅在父 div item-one、item-two、item-three 上保持行高以居中目的而让 child 独自一人？重置 childs 内的行高不起作用。

Answer 1

How do I keep line-height only on the parent div?

只需重置子 div 上的 line-height。

假设您从以下代码开始:

.header {
  line-height: 100px; /* parent line-height */
  ...
}

.header {
  line-height: 100px;
  border: 1px solid green;
  height: 100px;
  text-align: justify;
}

.header:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.header > div {
  vertical-align: middle;
  display: inline-block;
}

img {
  vertical-align: middle;
}

p {
  margin: 0;
}

<div class="header">
  <div class="item-one">
    <div>text here
      <p> more text here </p>
    </div>
  </div>
  <div class="item-two">
    <img src="http://via.placeholder.com/80x50">
  </div>
  <div class="item-three">
    <img src="http://via.placeholder.com/50x70">
  </div>
</div>

为了解决这个问题 - 只需重置 .item-one div 上的 line-height

.item-one {
  line-height: normal;  /* child line-height */
}

.header {
  line-height: 100px;
  border: 1px solid green;
  height: 100px;
  text-align: justify;
}

.header:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.header>div {
  vertical-align: middle;
  display: inline-block;
}

.item-one {
  line-height: normal;
}

img {
  vertical-align: middle;
}

p {
  margin: 0;
}

<div class="header">
  <div class="item-one">
    <div>text here
      <p> more text here </p>
    </div>
  </div>
  <div class="item-two">
    <img src="http://via.placeholder.com/80x50">
  </div>
  <div class="item-three">
    <img src="http://via.placeholder.com/50x70">
  </div>
</div>