13

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.

randomuser1
  • 2,733
  • 6
  • 32
  • 68
  • 3
    http://jsfiddle.net/tfLz08vd/2/ ? :) ul - text-align: center; li - display: inline-block; – Matej Đaković Jun 14 '15 at 13:30
  • 1
    yes, exactly! Idk how to close this question based on your comment, so if you post it as an answer I'll accept it and close it, thanks! – randomuser1 Jun 14 '15 at 13:33
  • possible duplicate of [Center
    • into div](http://stackoverflow.com/questions/1708054/center-ul-li-into-div)
     – Rob Jun 14 '15 at 13:34
  • 1
    @MatejĐaković, good job! Post an answer! – AmmarCSE Jun 14 '15 at 13:34
  • Since this question comes up first in Google results for people looking how to center a list including bullets, I thought I'd mention this can be accomplished using `ul {text-align: center; list-style-position: inside;}` – Adam Reis Apr 28 '19 at 20:12

4 Answers4

23

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

just add 

ul {
text-align: center;
}

li {
display: inline-block;
}

Good luck! ;)

Matej Đaković
  • 860
  • 4
  • 22
4

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;
}
Community
  • 1
  • 1
Tiziano Mischi
  • 176
  • 1
  • 16
1

You should try replace li {float:left;} by li {display: inline-block;} and put its parent ul {text-align: center;}

thelightings
  • 61
  • 3
0

Add this into ul css style

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

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

eQ19
  • 9,880
  • 3
  • 65
  • 77