html - 如何使用CSS垂直对齐页脚内容

Question

这张图片可以解释我的问题。我试图让版权文本和我的 Font Awesome 图标垂直对齐。

这是我的 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>

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

提前致谢。

Answer 1

你可以使用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>