Hoe kan ik mijn UL LI-lijst centreren in CSS?

Ik heb de volgende 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>

En met mijn CSS inbegrepen (in de jsfiddle ) Ik krijg het resultaat dat de tekst is uitgelijnd Aan de linkerkant … Hoe kan ik alles centreren, dus het resultaat zegt:

                 Contact  Press  Careers  Business  Careers  Bussiness 

?
Bedankt.

Antwoord 1, Autoriteit 100%

http://jsfiddle.net/tflz08vd/2/

Voeg gewoon

toe

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

Veel succes! 😉

Antwoord 2, Autoriteit 18%

Vergelijkbare vraag toegevoegd enkele tijd geleden
Hoe krijg ik mijn <.li> gecentreerd in mijn navigatie

Je hoeft alleen maar text-align:center aan het ul-element toe te voegen als volgt:

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

Antwoord 3

Probeer li {float:left;} te vervangen door li {display: inline-block;} en plaats de ouder ul {text-align:center;}

Antwoord 4

Voeg dit toe aan de css-stijl ul

section.video ul {
    margin-top: 30px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

Zie jsFiddle http://jsfiddle.net/tfLz08vd/83/