CSS 垂直对齐浮动 div

Question

我有一个包含 2 个并排放置的 div 的 div (#wrapper)。

我希望 right-div 垂直对齐。我在我的主包装器上尝试了 vertical-align:middle 但它不起作用。这让我发疯！

希望有人能帮忙。

http://cssdesk.com/LWFhW

HTML:

 <div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
  <div id="right-div">
    Here some text...
  </div>
</div>

CSS：

 #wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

原文由 Marc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

浮动元素不会让你走运。他们不遵守 vertical-align 。

您需要 display:inline-block 代替。

http://cssdesk.com/2VMg8

---

谨防！

小心 display: inline-block; 因为它将元素之间的空白解释为真正的空白。它不会像 display: block 那样忽略它。

我推荐这个：

将包含元素的 font-size 设置为 0 （零）并将 font-size 重置为元素中所需的值，如下所示

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

在此处查看演示：http: //codepen.io/HerrSerker/pen/mslay

---

CSS

 #wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

原文由 yunzen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 display table 和 display table-cell 很容易地做到这一点。

 #wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

编辑： 实际上很快就在 CSS Desk 上为你搞砸了 - http://cssdesk.com/RXghg

另一个 编辑： 使用 Flexbox。这会起作用，但它已经过时了 - http://www.cssdesk.com/davf5

 #wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

原文由 SpaceBeers 发布，翻译遵循 CC BY-SA 4.0 许可协议