如何仅在父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>

问题是每个文本块现在都具有100px的固有行高，使它看起来像这样：

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

如何仅在父级div [{1}}，item-one，item-two上保留行高，以便居中并让孩子独自一人？重置孩子内部的行高并不起作用。

Answer 1

我会为line-height切换flexbox以垂直对齐项目：

您可以查看此jsfiddle

这些是我用于您提供的HTML的样式：

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-one {
  span {
    display: block;
  }
}

Answer 2

重置子级内的行高

尽管private static boolean setUpIsDone = false; ..... public void setUp() { if (setUpIsDone) { return; } // do the setup setUpIsDone = true; } 的行高：100px 不影响子元素的行高

请查看以下示例：

item two

.item-one{
  line-height: 100px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 10px;
}

.item-two{
  line-height: 100px;
  background: #fff;
  border: 1px solid #eee;
}

.item-two > div{
  line-height: 30px;
}

Answer 3

  

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

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

所以，让我们说你开始使用以下代码：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

要解决此问题，只需重置.item-one line-height上的div

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果Flexbox不是一个选项，您可以使用position: absolute垂直居中文本。

在下面的代码段中，line-height已重置，且包含的div已垂直居中。

.header {
  line-height: 100px;
  background: pink;
}

.header .item-one {
  position: absolute;
  top: 75px;
}

.header .item-one div {
  line-height: 25px;
}

<div class="header">

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