html - Bootstrap 3 水平对齐文本和 div 中间的跨度

Question

我正在尝试将 Back To Top 和 div container 中间的 up carat 对齐，但我似乎无法让它工作。

我正在使用 Bootstrap 3。我如何让它在中间正确对齐？

HTML

<div class="container-fluid" id="footer">
    <a href="#" class="center-block">
        <p class="text-center" id="back-to-top">Back To Top</p><span class="glyphicon glyphicon-chevron-up"></span>
    </a>
    <p class="text-center" id="copyright">© 2014 LFDate. All rights reserved.</p>
</div>

CSS

#back-to-top {
display: inline;
margin-right: 10px;
}

Answer 1

你似乎以一种非常规的方式包装了你的元素(即 <p> 在 <a> 中)

我提出了一种不同的方法:

<div class="container-fluid" id="footer">
    <a href="#" class="center-block">
        <span class="glyphicon glyphicon-chevron-up"></span> Back To Top
    </a>
    <p class="text-center" id="copyright">
      © 2014 LFDate. All rights reserved.
  </p>
</div>

CSS

#footer{
  display: table;
}
#copyright {  
  display:table-cell;
  padding: 10px;
}

See Demo