CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
The Nomad
The Nomad

Reputation: 7425

Bootstrap 3 horizontal aligning text and span in middle of div

enter image description here

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

Upvotes: 0

Views: 2195

Answers (1)

blurfus
blurfus

Reputation: 14031

You seem to be wrapping your elements in a non-conventional way (i.e. 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

Upvotes: 1

Related Questions