CSS如何垂直对齐浮动的div元素

Question

CSS如何垂直对齐浮动的div元素

96

我有一个包含两个相邻div的div (#wrapper)。我希望右边的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

6个回答

23

你可以使用 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

1

你好，SpaceBeers。你的建议对我不起作用，因为我正在隐藏右侧div的溢出内容（我只是将代码添加到css桌面上）。使用你的解决方案会导致溢出未被隐藏，div会扩展其宽度... - Marc

11

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

通过创建一个包装器来围绕您想要浮动的内容，您可以使用 ::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;
}

- Justin Drury

我不确定你在做什么，但是在删除了centered类并从CSS中清理了大量冗余内容后，它仍然可以很好地进行垂直对齐，只需（对格式的损失感到抱歉！...）：

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

- Sz.

7

我尽力避免使用浮动布局，但是当需要时，我使用以下代码将元素垂直居中对齐：

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

- Maoritzio

4

一个可能的解决方案是使用包装器 div 并将其设置为 flex，然后将项目对齐到居中位置，如此https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/所述。

- Vilson Vieira

-1

我修改的唯一缺陷就是你必须设置 div 的高度……我不知道这对你是否是个问题。

http://cssdesk.com/kyPhC

- Sean Carruthers

1

你好，Sean。谢谢你的建议，但我想使用一种更加灵活的方案，因此希望避免这种解决方案... - Marc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yunzen · Accepted Answer

使用浮动元素将无法达到效果，因为它们不遵循 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;
}