div垂直对齐不起作用

Question

搜索了各种 文章之后，我无法vertical-align: middle在div中工作。

所期望的结果是什么，都float: left存在于div属性中： ________ _______ | | | | | lorem | | ipsum | |________| |_______|

.tile {
  float: left;
  width: 50%;
  min-height: 50px;
  text-align: center;
  background-color: blue;
}
#nav {
  display: table;
}
.middle {
  display: table-cell;
  vertical-align: middle;
  background-color: red;
}

<div class="tile" id="nav">
  <div class="tile middle">lorem</div>
  <div class="tile">ipsum</div>
</div>

我究竟做错了什么？除非像本文中所述是不可能的。

Answer 1

您的内部div与父类相同，将其删除，它将起作用

   <div class="nav">
   <div class="tile middle">lorem</div>
   <div class="tile">ipsum</div>
   </div>

http://fiddle.jshell.net/murjjchg/