Вертикальный промежуток центра внутри плавающего 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>