CODEWITHSUNDEEP
css
Gerry Mckay
Gerry Mckay

Reputation: 847

Center a UL horizontally within a DIV

I'm currently trying to center a <ul> horizontally within a <div> and it's not for budging, I've tried margin: 0 auto; and text-align: center; and neither seem to work.

Demo

HTML

<!-- START RECENT WORK -->
<div id="recentwork">
  <div class="display">
    <h2>Recent Work</h2>
    <ul>
      <li class="recent"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
      <li class="recent"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
      <li class="recent last"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
    </ul>
  </div>

</div>
<!-- CLOSE RECENT WORK -->

CSS

#recentwork {
    width: 100%;
    background-color: #ececec;
    clear: both;
    padding: 80px 0;
}

#recentwork .display {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

#recentwork .display ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#recentwork .display ul li.recent {
    float: left;
    margin-right: 30px;
    width: 200px;
}

#recentwork .display ul li.recent.last {
    margin-right: 0!important;
}

Upvotes: 1

Views: 7495

Answers (5)

seangates
seangates

Reputation: 1522

Try this:

#recentwork {
    width:100%;
    background-color:#ececec;
    clear:both;
    padding:80px 0;
}

.display {
    width:960px;
    margin:0 auto;
    overflow:hidden;
}

.display ul {
    display: block;
    margin:0 auto;
    padding:0;
    list-style:none;
    text-align: center;
    width: 820px;
}

.recent{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 270px;
}

Note the use of display: inline-block and the use of proper widths.

http://jsfiddle.net/Z6LJE/

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324830

margin: 0 auto will only work if you have a fixed width.

I'm assuming you want the individual list items to still be left-aligned within the list itself. In that case, try this:

<div class="centerlist">
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>A longer list item than the other two</li>
  </ul>
</div>

And this CSS:

.centerlist {
    text-align: center;
}
.centerlist > ul {
    display: inline-block;
    text-align: left;
}

Upvotes: 1

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

Modify the following CSS:

#recentwork .display ul {
    display: block;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

#recentwork .display ul li.recent {
    display: inline-block;
    margin-right: 30px;
    width: 200px;
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Lets use the old school technique of centering the list by giving a display: inline-block. Do it this way:

#recentwork .display {
    overflow: hidden;
    text-align: center;
}

#recentwork .display ul {
    display: inline-block;
    padding: 0;
    list-style: none;
}

#recentwork .display ul li.recent {
    display: inline-block;
    margin-right: 30px;
    width: 200px;
}

Fiddle: http://jsfiddle.net/praveenscience/pU2Gx/3/

Upvotes: 7

j08691
j08691

Reputation: 208032

Your ul needs to have a width for it to be centered.

For example:

#recentwork .display ul {
    margin:0 auto;
    padding:0;
    list-style:none;
    width:700px;
}

jsFiddle example

Upvotes: 0

Related Questions