如何垂直中间alignment未知高度的浮动元素？
我有一个（水平）居中的外部div包含两个未知宽度的元素：
<div style='width:800px; margin:0 auto'> <div style='float:left'>...</div> <div style='float:right'>...</div> </div> 两个花车默认都是顶部alignment的，并且具有不同的/未知的和不同的高度。 有没有办法让它们垂直居中？
我最终做出了外部的股利
display: table
和内部的divs
display: table-cell; vertical-align: middle; text-align: left/right;
但我只是好奇，如果有一种方法来与浮游物做这个。
你不能直接这样做，因为浮动alignment到顶端：
如果有线框，则浮动框的外部顶部与当前线框的顶部alignment。
确切的规则说（强调我的）：
- 浮箱的外顶不得高于其包含块的顶部。
- 浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。
- 元素浮动框的外部顶部可能不会高于包含由源文档中早期元素生成的框的任何线框的顶部。
- 浮动箱子必须尽可能高。
也就是说，你可以利用规则4：
- 将每个浮点放置在build立新块格式上下文 / BFC的内联级元素内 ，例如
display: inline-block。 - 这些包装将包含浮动，因为他们build立一个BFC，并将是一个紧挨着另一个，因为它们是内联级别的。
- 使用
vertical-alignalignment这些包装。
请注意，内联块封装之间可能会出现一些空间。 请参阅如何删除内联块元素之间的空间？ 要解决这个问题。
.float-left { float: left; } .float-right { float: right; } #main { border: 1px solid blue; margin: 0 auto; width: 500px; } /* Float wrappers */ #main > div { display: inline-block; vertical-align: middle; width: 50%; }
<div id="main"> <div> <div class="float-left"> <p>AAA</p> </div> </div> <div> <div class="float-right"> <p>BBB</p> <p>BBB</p> </div> </div> </div>
另一种方法是使用flex – 如果你有两个部分，它可以代替float 。 一个（浮动）将是自动大小，第二个将会占据整个容器。 在横轴上selectcenter和瞧，你有浮动和居中元素的影响。
这里是关于flex的美丽的cheatsheet： http : //jonibologna.com/flexbox-cheatsheet/
不要这样，当表格单元格看起来像是个好主意的时候。 如果它是一个固定的高度，你可以使用行高。
