CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vodokan
Vodokan

Reputation: 793

Center unordered list in container

I'm using bootstrap v3 & trying to align unordered list in the center of the container. For some reason it's not centered correctly

here is how it looks

Here's the html

 <!-- Page Content -->
    <div class="container" style="border: 1px solid red">
        <div class="row">
            <div class="col-lg-12">
              <ul id="tabs">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->

and css

ul#tabs {
    display: block;
    margin: 0 auto;
}

ul#tabs li{
    float: left;
    border: 1px solid red;
    width: 180px;
    height: 80px;
    padding:0;
    margin:0;
}

What I'm doing wrong?

Upvotes: 0

Views: 1742

Answers (1)

pawel
pawel

Reputation: 36965

margin: 0 auto; won't center an element without specified width, because display:block makes the element occupy all the available horizontal space.

Since your lis are fixed width you could try:

ul#tabs {
    display: block;
    text-align:center;
}

ul#tabs li{
    display:inline-block;
    border: 1px solid red;
    width: 180px;
    height: 80px;
    padding:0;
    margin:0;
}

http://jsfiddle.net/01fLnf28/

Keep in mind that the ul is still as wide as its parent, so it may not be the best solution if you need a background on the ul that covers only the area of combined lis.

Upvotes: 1

Related Questions