CODEWITHSUNDEEP
htmlcssposition
ivva
ivva

Reputation: 2949

Vertical align middle footer

I'm trying to position vertical footer. I have text and logo in it. Logo is aligned right. It has height 38 and footer must be with height of 80px. But I can't align them vertical both text and logo.

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

Upvotes: 1

Views: 1383

Answers (1)

andrrs
andrrs

Reputation: 2309

You could use display:table-cell and line-height:38px; for this.

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

I made a fiddle here:

https://jsfiddle.net/d3m7yxrg/

Upvotes: 1

Related Questions