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

Question

I am trying to align the Back To Top and the up carat in the middle of the div container but I can't seem to get it to work.

I am using Bootstrap 3 . How do I get this to align properly in the middle?

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

You seem to be wrapping your elements in a non-conventional way (ie a <p> inside an <a> )

I propose a different approach:

<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