Html CSS垂直对齐浮动div

我有一个div（#wrapper），包含两个并排站立的div

我希望右div垂直对齐。我尝试在我的主包装上垂直对齐：中间，但它不起作用。它快把我逼疯了

希望有人能帮忙

HTML:

---

使用“显示表”和“显示表单元格”可以非常轻松地完成此操作

#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桌面上为你乱搞了-

另一个编辑：使用Flexbox。这会管用，但已经过时了-

---

我修改的唯一缺点是你有一个固定的div高度…我不知道这对你来说是不是一个问题

---

使用浮动元素时运气不佳。他们不服从垂直排列

您需要，

显示：内联块

：

当心

---

小心

显示：内联块将元素之间的空白解释为实际空白。它不会像
display:block
那样忽略它

我建议：

将包含元素的
字体大小
设置为
0
（零），并将
字体大小
重置为所需的元素值，如下所示

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

请参见此处的演示：


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

通过围绕要浮动的内容创建包装，然后可以使用：：after或：：before伪选择器在包装内垂直对齐内容。您可以根据需要调整该内容的大小，而不会影响对齐方式。唯一需要注意的是包装必须填满其容器100%的高度


HTML
一个可能的解决方案是使包装器
div
flex
与指定的
中心对齐。
我尽最大努力避免使用浮动。。。但是-需要时，我使用以下线条垂直对齐到中间：

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

你好，肖恩。谢谢，但我正在尝试使用一种灵活的解决方案，因此希望避免这种解决方案……你好，SpaceBeers。你的建议对我不起作用，因为我隐藏了right div的溢出（我只是将代码添加到css桌面中）。在您的解决方案中，溢出不会隐藏，div会扩展其宽度……如果包装高度固定，这将不起作用。#right div相对于#left div居中，而不是相对于wrapper元素。（
inline block
使其行为类似于设置了
align
属性的inline
img
）@Costa我认为这是它应该的方式。它应该是什么方式并不重要，在很多情况下，必须使用浮动元素，而且CSS中总是有一种方式可以完成某些事情。总是。在最简单的情况下，浮动文本的垂直对齐：但是你的解决方案也不起作用，因为你不能仅仅决定不使用浮动。整个要点是在使用浮动时以某种方式垂直对齐。我的全部观点是，有时内联块不是一个选项，并提供了一个用例来帮助可能最终从谷歌进入此页面的其他人。没有必要这么粗鲁。我不知道你在干什么，但是在删除了以
为中心的
类并清理了CSS中的大量冗余内容之后，它仍然可以进行垂直对齐，只是（很抱歉丢失了格式！…）
div{border:1px纯红；height:100px；}.flotter{float:right；height:100%；}h1{vertical align:middle；}.container:after、.floter:after、.centered:after{height:100%；内容：''；字体大小：0；vertical align:middle；display:inline block；}
#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

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

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

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

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

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

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

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