如何使用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

＆＃13;

＆＃13;

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

#social {
  margin-left: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试将vertical-align: middle;添加到social_buttons类。

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