浮动div内的垂直中心跨度

Question

我有一个divs列表，像菜单，我想把它们放在中间。它可以工作，如果他们没有漂浮，但一旦我漂浮他们，它不会居中跨度了。任何想法为什么以及如何解决这个问题？

#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; 
} 

UPDATE：如果你不需要全高，你可以使用这样的： 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; 
} 

Answer 2

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

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