浮動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>