在DIV内水平居中UL

Question

我目前正试图在一个<ul>水平的中心<div>,而不是为了预算,我已经尝试过margin: 0 auto;,text-align: center;似乎都没有工作.

演示

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;
}

Answer 1

让我们使用旧的学校技术,通过给出一个中心列表display: inline-block.这样做:

#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;
}

小提琴:http://jsfiddle.net/praveenscience/pU2Gx/3/