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

Question

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

这是代码: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"块高度 - 这使得与所描述的类似情况(其中此高度以像素显式设置)的主要区别.

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

这个中心垂直未知高度文本中未知高度div实际上包括硬编码高度设置 - 这与我的情况大不相同.

那一个如何垂直中间对齐未知高度的浮动元素？也是不同的情况,不适合我的情况 - 因为父高度等于浮动divs高度(这比我的情况容易得多).

我试着玩不同的display:table设置 - 但仍然没有运气.

Answer 1

我建议使用flexbox,display: inline-flex因此它具有"缩小以适应"功能,就像其他内联级别元素一样.并且align-items: center使所有的柔性项目,调整到中间.

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

如果您确实需要支持旧浏览器,您仍然可以使用内联块(无浮点),关键是设置vertical-align: middle,并在需要时删除不需要的空白区域.

#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,但它与内联块的工作方式不同,它将内容或元素垂直居中,而不是元素本身或兄弟.我<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>