html - float div 内的垂直中心跨度

Question

我有一个类似菜单的 div 列表，我想将它们的跨度居中。如果它们不 float ，它会起作用，但一旦我 float 它们，它就不会再使跨度居中。知道为什么以及如何解决这个问题吗？

#panel {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
  float: left;
  background-color: yellow;
  height: 80px;
  
}
span {
  background-color: green;
}

<div id="panel"><span>Some caption  </span>
</div>
<div id="panel"><span>Some caption </span>
</div>

Answer 1

像这样尝试: demo

CSS:

#panel {
    display: block;
    width: 40%;
    float: left;
    background-color: yellow;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    /* tall height for emphasis */
}
span {
    background-color: green;
    display: table-cell;
    vertical-align: middle;
}

更新:如果您不需要全高，您可以这样使用: Demo

CSS:

#panel {
    display: block;
    width: 40%;
    float: left;
    background-color: yellow;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    /* tall height for emphasis */
}
span {
    background-color: green;
    display: inline-block;
    vertical-align: middle;
    line-height:30px;
}