css - 垂直居中对齐高度未知的div

Question

我正在尝试解决涉及 float div 的 vertical-align 问题。所有高度都是未知的 - 因为它们仅由内部文本行隐式形成。

这是代码:https://jsfiddle.net/zjzyryae/

#test {
  background: yellow;
  display: inline-block;
}
#block1 {
  float: left;
  display: inline-block;
  background-color: grey;
}
#block2 {
  background-color: green;
  float: left;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

我需要将“block2”div 垂直居中 - 当然只使用 CSS(没有 JavaScript)。

看到“block1”div 隐式设置了父“test” block 高度——这与描述的类似情况有主要区别(此高度以像素为单位明确设置)。

也许这个问题在某个地方得到了解决，但我还没有找到完全相同的案例。我考虑的类似例子是不同的。

这个Center vertically a unknown height text in a unknown height div实际上包括硬编码的高度设置——这与我的情况截然不同。

那个How to vertically middle-align floating elements of unknown heights?也是不同的情况，不适合我的情况 - 因为父级高度等于 float div 高度(这比我的情况容易得多)。

我尝试使用不同的 display:table 设置 - 但还是不行。

Answer 1

我建议使用 flexbox，与 display: inline-flex 完美搭配因此它与其他内联元素一样具有“缩小以适合”功能。和 align-items: center使所有 flex 元素对齐到中间。

#test {
  background: yellow;
  display: inline-flex;
  align-items: center;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

如果你确实需要支持旧的浏览器，你仍然可以使用内联 block (没有 float )，关键是设置vertical-align: middle , 并删除 unwanted white space如果需要的话。

#test {
  font-size: 0; /*remove white space*/
  background: yellow;
  display: inline-block;
}
#block1,
#block2 {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

或者使用CSS表格，再次设置vertical-align: middle , 但它与内联 block 的工作方式不同，它垂直居中内容或内部元素而不是元素本身或兄弟元素。我添加了一个 <span>背景颜色的标记。

#test {
  background: yellow;
  display: inline-table;
  vertical-align: middle;
}
#block1,
#block2 {
  display: table-cell;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
/* #block2 {
  background-color: green;
} */

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    <span style="background:green;">sample</span>
  </div>
</div>