div垂直对齐不起作用[重复]答案

【问题标题】：div vertical align not working [duplicate]div垂直对齐不起作用[重复]
【发布时间】：2015-06-26 10:11:10
【问题描述】：

在搜索various articles 后，我无法让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>

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

【问题讨论】：

将height: 100%; 修改为.middle 并不能解决问题，除非您说不可能？
从 tile 类中删除浮动或从您的内部 div 中删除 tile 类。
jsfiddle.net/3a6a5b77/1
@MarkLeiber 谢谢！我可以使用它。你能解释原因吗？
浮动与表格显示冲突（请参阅stackoverflow.com/questions/10819931/…）。另请注意，向 tile 类添加 50px 的 line-height 也可以解决您的问题。

标签： html css vertical-alignment

【解决方案1】：

你有与父级相同的内部 div，删除它，它会工作

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

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

【讨论】：

【解决方案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

【讨论】：