Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我需要垂直居中＆＃34; block2＆＃34; div - 当然只有CSS（没有JavaScript）。

见＆＃34; block1＆＃34; div隐式地设置了父＆＃34; test＆＃34;块高度 - 这与所描述的类似情况（其中此高度明确设置为像素）的主要区别。

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

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

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

我尝试使用不同的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，并在需要时删除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，但它与内联块的工作方式不同，它将内容或元素垂直居中，而不是元素本身或兄弟姐妹。我为背景颜色添加了<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>

Answer 2

如果您不想使用flex，请勿使用float ，但inline-block单独使用vertical-align：

＆＃13;

    #test {
      background: yellow;
      display: inline-block;
    }
    
    #block1 {
      display: inline-block;
      background-color: grey;
      vertical-align:middle;
    }
    
    #block2 {
      display: inline-block;
      background-color: green;
      vertical-align:middle;
    }

＆＃13;

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

＆＃13;

＆＃13; https://jsfiddle.net/zjzyryae/1/

Answer 3

您可以使用flexbox

#test {
        background: yellow;
        display: flex;
        align-items: center;
    }

Answer 4

为什么不为他们使用display flex？这是一个新的技巧，值得尝试。从头开始使用flex并更改css代码的类型。

这就是我能给你的全部。

    div#test {
        background: yellow;
        display: flex;
      flex-direction:row;
    }

div#block1, div#block2{
display:flex;
flex-direction:column;}
    div#block1 {
        background-color: grey;
    }

    div#block2 {
        background-color: yellow;
      align-items:center;
      justify-content:center
    }
    div#inside-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">
      <div id="inside-block2">
        sample
      </div>
    </div>

</div>

所以我所做的是，使用子block1和block2做了一个名为test的包装，并且block2 id有一个孩子，您可以在任何地方放置或替换它。您可以在here

中了解有关flex的更多信息

我的一些代码提示。使用div#id在css中调用id名称，我相信如果你只使用这个#id调用它们，某些浏览器会有点跳跃。

希望它会对你有所帮助。

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

4 个答案: