How can I center my ul li list in css?

Question

I have the following html code:

<section class="video"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <ul class="footer-nav"> <li><a href="#">Contact</a></li> <li><a href="#">Press</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Business</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Business</a></li> </ul> </div> </div> </div> </section> 

and with my CSS included (in jsfiddle ) I get the result that the text is aligned to the left ... How can I focus everything, so the result says:

  Contact Press Careers Business Careers Bussiness 

? Thanks.

Answer 1

http://jsfiddle.net/tfLz08vd/2/

just add

 ul { text-align: center; } li { display: inline-block; } 

Good luck!;)

Answer 2

A similar question was added several times ago How do I get my <.li> in the center of my navigator

You just need to add text-align: center to ul, for example:

 .footer-nav{ text-align: center; } .footer-nav li { list-style: none; padding: 5px; display: inline-block; } 

Answer 3

You should try replacing li {float: left;} with li {display: inline-block;} and place its parent ul {text-align: center;}