title: how to vertically align footer contents with css
body: <p><a href="https://i.stack.imgur.com/0qVgh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0qVgh.png" alt="Footer"></a></p>
  
  <p>This image can explain my issue. I am trying to get both the copyright text and my Font Awesome icons to be vertically aligned.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;footer&gt;
  &lt;p&gt;Copyright &amp;copy; 2016 Sample SIte&lt;/p&gt;
  &lt;div id="social"&gt;
  &lt;a class="social_buttons" href="www.linkedin.com"&gt;&lt;i class="fa fa-        linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="social_buttons" href="www.linkedin.com"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>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; 
  }
  </code></pre>
  
  <p>Thanks in advance.</p>