CODEWITHSUNDEEP
csshtml
user1724763
user1724763

Reputation:

Make UL align center in parent DIV

.list{
    list-style: none;
    display: inline-block;
    text-align: left;
    margin:0;
    padding:0;
    margin-left:-20px;
}

.list > li {
    display: inline-block;
    width: 100px;
    height : 100px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
    margin-left: 20px;
    margin-bottom: 20px;
}


<div style="text-align:center">
<ul class="list">
    <script>
        for (var i=0;i<60;i++)
        document.write("<li></li>");
    </script>
</ul>
</div>

I am trying to make the UL center in the DIV.

Requirements:

Tried these but failed:

Why won't my Div center itself in its parent?

Centering an UL inside a DIV

How to horizontally align ul to center of div?

@mark's solution does not work: for Mark

Upvotes: 1

Views: 2053

Answers (3)

psdpainter
psdpainter

Reputation: 666

Your containing element has to have a width defined; you can't just say text-align: center for it to work.

Do this:

Updated Fiddle

Essentially you're just defining a few properties on the containing element and took out the margin-left: -20px. in your code.

Upvotes: 0

xManh
xManh

Reputation: 67

by default, ul element is like a block, that means it will take 100% width of it's parent. So if you want it to be center, you must set its width to a specific pixel or change the display attribute:

.list{display:inline-block}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Remove

text-align: left;

from .list

Updated fiddle here.

Upvotes: 1

Related Questions