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与父类相同的类，删除它，它将工作

   <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 vertical align not working

2 个答案: