垂直對齊中間頁腳

Question

我正在嘗試定位垂直頁腳。我有文字和標誌。徽標右對齊。它的高度爲38，頁腳高度爲80px。但我無法將文字和徽標垂直對齊。

#footer { height: 80px; } 
 
#footer .text{margin: 0 auto; width: 1024px; padding-top: 35px;vertical-align:middle;} 
 
#footer .text #logo-footer {background:url("image.png") ; float:right; margin-right:0;width:172px;height:38px;}

<div id="footer"> 
 
<div class="text"> 
 
    some text here 
 
    
 
    <div id="logo-footer"></div> 
 
</div> 
 

 
</div>

Answer 1

您可以使用此display:table-cell和line-height:38px;。

#footer { height: 80px; display:table;background:red;} 
#footer .text{display:table-cell;margin: 0 auto; width: 1024px;height:100%; vertical-align:middle;line-height:38px;} 
#footer .text #logo-footer {background:url("image.png") ; float:right; margin-right:0;width:172px;height:38px;} 

我在這裏做一個小提琴：

https://jsfiddle.net/d3m7yxrg/