CSS 垂直对齐浮动 div

Question

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

我希望右 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;}

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

Answer 2

您可以使用显示表格和显示表格单元轻松完成此操作。

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

Answer 3

我意识到这是一个古老的问题，但我认为发布浮动垂直对齐问题的解决方案会很有用。

通过围绕您要浮动的内容创建一个包装器，您可以使用 ::after 或 ::before 伪选择器在包装器内垂直对齐您的内容。您可以随意调整该内容的大小，而不会影响对齐。唯一的问题是包装器必须填充 其 容器的 100% 高度。

http://jsfiddle.net/jmdrury/J53SJ/

HTML

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

CSS

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Answer 4

一种可能的解决方案是使包装器divflex 与center 上对齐的项目https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ 指定。

Answer 5

我尽我所能避免使用浮动...但是 - 在需要时，我使用以下行垂直对齐到中间：

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 6

我修改的唯一缺点是您设置了 div 高度...我不知道这是否对您有问题。

http://cssdesk.com/kyPhC