css - 在 DIV 中水平居中 UL

Question

我目前正在尝试将 a<ul>水平居中在 a 中<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/

Answer 2

margin: 0 auto仅当您具有固定宽度时才有效。

我假设您希望各个列表项在列表本身内仍然左对齐。在这种情况下，试试这个：

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

这个CSS：

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

Answer 3

尝试这个：

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

注意display: inline-block正确宽度的使用和使用。

http://jsfiddle.net/Z6LJE/

Answer 4

您的 ul 需要有一个宽度才能使其居中。

例如：

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

jsFiddle 示例

Answer 5

修改以下 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;
}