CODEWITHSUNDEEP
htmlcss
colby42536
colby42536

Reputation: 161

how to vertically align footer contents with css

Footer

This image can explain my issue. I am trying to get both the copyright text and my Font Awesome icons to be vertically aligned.

Here is my HTML

<footer>
<p>Copyright &copy; 2016 Sample SIte</p>
<div id="social">
<a class="social_buttons" href="www.linkedin.com"><i class="fa fa-        linkedin"></i></a>
<a class="social_buttons" href="www.linkedin.com"><i class="fa fa-twitter"></i></a>
</div>
</footer>

And CSS

footer
{
max-width:960px;
background-color:#fbfbfb;    
border-radius:10px;  
margin:15px auto 10px auto;
padding: 18px 20px 18px 20px;  
}

#social
{
float:right;
}

.social_buttons
{
color:#575757; 
}

Thanks in advance.

Upvotes: 1

Views: 5481

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122125

You can use Flexbox 

footer{
  background-color: #fbfbfb;    
  padding: 10px;  
  display: flex;
  align-items: center;
}

#social {
  margin-left: auto;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
  <p>Copyright &copy; 2016 Sample SIte</p>
  <div id="social">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-twitter"></i>
  </div>
</footer>

Upvotes: 5

Jeff
Jeff

Reputation: 31

You could try adding vertical-align: middle; to the social_buttons class.

.social_buttons {
  color: #575757;
  vertical-align: middle;
}

Upvotes: 1

Related Questions