Center aligning Li's using text-align: center does not work

Question

I have a bunch of li's with hyperlinks in them. Here's a demo http://codepen.io/anon/pen/aOxJyr

<div class="collapse navbar-collapse" id="categorycollapse">
    <ul id="Category" class="row list-inline  nav navbar-nav">      
        <li>
            <a href="/products/Category/Cars">
                Cars
            </a>
        </li>

        <li>
            <a href="/products/Category/Cars%20R">
                Cars R
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Tempo">
                Tempo
            </a>
        </li>

        <li>
            <a href="/products/Category/Cycle">
                Cycle
            </a>
        </li>

        <li>
            <a href="/products/Category/Jet">
                Jet
            </a>
        </li>   
    </ul>
</div>

I have used the following CSS for these list items to center align them. But it looks like some other css property is overriding my settings and the li's are left aligned instead. Check the bottom most row which is left-aligned.

#Category {
    border:1px solid #C4C6C6;
    margin: 0 60px 0 60px;
    padding: 20px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    text-align: center !important;
}

#Category > li {
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0 0 20px;
    display: inline-block;
}


#Category li a, ol li a {
 background-color: #07575B;
  color: #FFFFFF;
        transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    -webkit-transition: background .2s ease-in;
        padding: 10px 10px;
    border-radius: 3px;
    font-size: 14px !important;
    display: inline !important;
}

How can I center align the list in a way that it overrides all css settings. With Center-align I mean if the elements span two rows, and the second row has only 3 elements, then those elements must be center-aligned and not left-aligned.

Update: Got it. The issue was with the attribute navbar-nav that I had applied on my Category which was left aligning the elements. I removed it.

I'm running your code above in Chrome. All `li`s are centered in the container. Is there another issue? — Michael Benjamin, Aug 13 '15 at 03:16
This is your exact code above: http://jsfiddle.net/xmd8bc68/ .. everything is centering — Michael Benjamin, Aug 13 '15 at 03:18
Increase the number of elements and it doesn't. Check this http://jsfiddle.net/xmd8bc68/1/ — CuriousDev, Aug 13 '15 at 03:20
Here.. I built this recently for another answer... http://jsfiddle.net/du4nty1g/2/ ... useful? — Michael Benjamin, Aug 13 '15 at 03:23
Thanks Michael. I have solved it. Upvoting your comment since you too solved it. — CuriousDev, Aug 13 '15 at 03:30
Glad I could help. Also, as a side note, check the order of your `transition` declarations. It's generally better to put the W3C spec version last on the list. [Ordering of vendor-specific CSS declarations](http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations) — Michael Benjamin, Aug 13 '15 at 03:34

Pouya Ataei · Accepted Answer · 2015-08-13T03:20:10.097

0

I've tried adding these CSS properties to your UI and it seemes to solve the issue;

#Category > ul {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

Checkout the link and let me know;

Nav Aligned

Update:

If you're looking forward to have your second row aligned at center, please remove text-align:left !important from your #category and add text-align:center instead, checkout this jsfiddle:

Navs

edited Aug 13 '15 at 03:20

answered Aug 13 '15 at 03:11

Pouya Ataei

1,959
2
19
30

Thanks. I just checked and it doesn't. If you see the last row is still left-aligned. I have added some addtnl info. – CuriousDev Aug 13 '15 at 03:14
you're looking forward to have the second row centered ? – Pouya Ataei Aug 13 '15 at 03:17
Yes exactly and similarly any rows below it depending on the number of elements each row has – CuriousDev Aug 13 '15 at 03:18
IWantToLearn, I've updated the answer, with the following css styling you can have as many as "li"'s you would like to have, displayed at center. – Pouya Ataei Aug 13 '15 at 03:23
Got it. The issue was with the property navbar-nav that I had applied on my Category. I removed it and everything works. I am marking your answer since it is technically correct. – CuriousDev Aug 13 '15 at 03:28
Thank you, you can also use my css properties, but it's entirely up to you :) – Pouya Ataei Aug 13 '15 at 03:30

score 0 · Answer 2 · answered Aug 13 '15 at 03:27

0

Running OSX. Just checked your code in Chrome, Firefox and Safari. Centered in each one. Are you, perhaps, using IE as your browser?

answered Aug 13 '15 at 03:27

Bob Dill

1,000
5
13

Center aligning Li's using text-align: center does not work

2 Answers2