div 垂直对齐不起作用

Question

搜索 various articles 后，我无法 vertical-align: middle 在 div 中工作。

期望的结果是什么，div 属性中都存在 float: left： ________ _______ | | | | | 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>

我做错了什么？除非像this article文章中说的那样不可能。

Answer 1

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

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

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

Answer 2

也许，这对你有用。

CSS:

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

HTML:

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

Working Demo

div 垂直对齐不起作用

div vertical align not working

html

css

vertical-alignment