中心列表项答案

【问题标题】：Center list items中心列表项
【发布时间】：2015-08-16 02:30:10
【问题描述】：

我创建了一个列表，其中包含电影案例和每个案例下方的标题。但是，我无法让列表项居中。

它是这样的：

这是我想要的样子：

在以下 CSS 规则中，我将 #main-container 与 margin: 0 auto 居中

#main-container {
  width: 600px;
  margin: 0 auto;
}

但是，这只是以 #main-container 为中心，而不是列表项。

我认为这与这个 CSS 规则有关。

.element {
  position: relative;
  margin: 0;
  float: left;
}

JSFiddle

#main-container {
  width: 600px;
  margin: 0 auto;
}
#movies-container {
  padding: 0;
  margin: 0;
}
#movies-container li {
  list-style: none;
  margin-right: 15px;
}
.element {
  position: relative;
  margin: 0;
  float: left;
}
.cover {
  background: grey;
  width: 90px;
  height: 130px;
}
.element img {
  width: 90px;
  height: 130px;
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
}
.element .title {
  height: 20px;
  margin-top: 5px;
  text-align: center;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background: #fff;
  color: #333;
  width: 100%;
}

<div id="main-container">
  <ul id="movies-container">
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
  </ul>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

同样适用于 Internet Explorer 的工作解决方案

如果你给float 它不会成功。看看这个：

预览

片段

#main-container {
  width: 600px;
  margin: 0 auto;
}
#movies-container {
  padding: 0;
  margin: 0;
  text-align: center;
}

#movies-container li {
  list-style:none;
  margin-right: 15px;
}
.element {
  position: relative;
  margin: 0;
  display: inline-block;
}

.cover {
  background: grey;
  width: 90px;
  height: 130px;
}

.element img {
  width: 90px;
  height: 130px;
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
}

.element .title {
  height: 20px;
  margin-top: 5px;
  text-align: center; 
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background: #fff;
  color: #333;
  width: 100%;
}

<div id="main-container">
  <ul id="movies-container">
    <li class="element">
      <div class="cover">
        <a href="#"><img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" /></a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>    <li class="element">
    <div class="cover">
      <a href="#"><img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" /></a>
    </div>
    <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
  </ul>
</div>

小提琴：https://jsfiddle.net/6qo6zL6f/3/

【讨论】：

哇，我不知道 text-align 可以处理这样的列表中的元素。我认为它只适用于文本。非常感谢您的帮助和出色的解决方案！
@JoshPotter 是的，我们在这里将列表转换为文本元素，使用display: inline-block。
不想打扰你，但出于某种奇怪的原因，我还注意到使用内联块时添加了一些间距。它实际上影响了我的整个页面。你知道我怎么能摆脱这个吗？我试过字体大小：0；像大多数人建议的那样，但这并没有奏效。
是的，你可以做到。 @JoshPotter 只是不要在<li> 之间留出空格。这样做：</li><li>
非常感谢，你是圣人！

【解决方案2】：

Flexbox 可以很好地解决这个问题。

添加了 CSS

#movies-container {
  display: flex;
  flex-flow: row wrap; /* Wrap to next line */
  justify-content: center; /* Center all rows */
}

检查 Browser compatibility table 的 Flexbox

#main-container {
  width: 600px;
  margin: 0 auto;
}
#movies-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
#movies-container li {
  list-style: none;
  margin-right: 15px;
}
.element {
  position: relative;
  margin: 0;
  float: left;
}
.cover {
  background: grey;
  width: 90px;
  height: 130px;
}
.element img {
  width: 90px;
  height: 130px;
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
}
.element .title {
  height: 20px;
  margin-top: 5px;
  text-align: center;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background: #fff;
  color: #333;
  width: 100%;
}

<div id="main-container">
  <ul id="movies-container">
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

这就是我将如何实现您正在寻找的效果，主要区别是在.element 上使用inline-block 和在#main-container 上使用text-align: center。

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
#main-container {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
#movies-container,
.element {
    margin: 0;
    padding: 0;
}
#movies-container {
    font-size: 0;
}
.element {
  display: inline-block;
  list-style: none;
  padding: 7.5px;
}
.cover {
  background: grey;
  width: 90px;
  height: 130px;
}
.element img {
  width: 90px;
  height: 130px;
  opacity: 1;
  -webkit-transition: opacity 0.2s linear;
}
.element .title {
  height: 20px;
  margin-top: 5px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background: #fff;
  color: #333;
  width: 100%;
}

<div id="main-container">
  <ul id="movies-container">
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
    <li class="element">
      <div class="cover">
        <a href="#">
          <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
        </a>
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">300</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
      </div>
      <div class="title">9</div>
    </li>
    <li class="element">
      <div class="cover">
        <img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
      </div>
      <div class="title">Gladiator</div>
    </li>
  </ul>
</div>

【讨论】：