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 the jsfiddle) I get the result that the text is aligned to the left... How can I center 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

Similar question added few time ago How do I get my <.li> centered in my nav

You simply have to add text-align: center to ul element like this:

.footer-nav{
    text-align: center;
}

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