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/

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 example

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

在DIV内水平居中UL

5 个答案:

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