垂直对齐中间页脚

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

我在这里做了一个fiddle：

https://jsfiddle.net/d3m7yxrg/

垂直对齐中间页脚

Vertical align middle footer

html

css

position