HTML + ul li 对齐中心

Question

我有一个 ul li 列表，我试图将 li 对齐到 ul 的中心。我附上了我的 HTML 代码和 CSS。

重要提示:在 li hover 上，我添加了一些动画 (margin-top)。

预期输出:在不影响li的情况下，将li对齐到ul的中心，

#content-right {
  border-top: 3px solid #f1f1f1;
  border-bottom: 3px solid #f1f1f1;
  width: 100%;
  border: 1px solid green;
  float: left;
}

#content-right {
  float: left;
  height: 159px;
}

#partner-icons {
  margin: 0 0 0 20px;
  padding: 0;
  text-align: center;
}

#partner-icons li {
  list-style: none;
  float: left;
  margin: 10px;
  text-align: center;
  width: 14%;
  text-transform: uppercase;
  font-size: 0.8em;
  height: 50px;
  font-weight: 700;
  display: inline-block;
}

#partner-icons li figure {
  color: #e90e0e;
}

#partner-icons li img {
  width: 90%;
  margin-bottom: 10px;
}

#partner-icons li figure {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

#partner-icons li:hover figure {
  margin-top: 5px;
}

<div id="content-right">
  <ul id="partner-icons" class="cf">
    <li id="first">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      ABCDEF
    </li>
    <li id="second">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      GHJIDDK
    </li>
    <li id="fifth">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      FDSNOISD
    </li>
    <li id="sixth">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      GDSFDSDSD
    </li>
  </ul>
</div>

我尝试自己将它对齐到中心，我更改了 li (float:none) 的 CSS，它工作正常但悬停动画不起作用。拜托，任何人都可以帮助解决这个问题。

Answer 1

去掉float:left，在li中加入vertical-align: top;，默认为inline-block 元素与基线对齐，这就是为什么移除边距会影响所有 li 元素的原因。

#content-right {
  border-top: 3px solid #f1f1f1;
  border-bottom: 3px solid #f1f1f1;
  width: 100%;
  border: 1px solid green;
  float: left;
}

#content-right {
  float: left;
  height: 159px;
}

#partner-icons {
  margin: 0 0 0 20px;
  padding: 0;
  text-align: center;
}

#partner-icons li {
  list-style: none;
  /*float: left;*/
  margin: 10px;
  text-align: center;
  width: 14%;
  text-transform: uppercase;
  font-size: 0.8em;
  height: 50px;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
}

#partner-icons li figure {
  color: #e90e0e;
}

#partner-icons li img {
  width: 90%;
  margin-bottom: 10px;
}

#partner-icons li figure {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

#partner-icons li:hover figure {
  margin-top: 5px;
}

<div id="content-right">
  <ul id="partner-icons" class="cf">
    <li id="first">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      Offers
    </li>
    <li id="second">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      Fantasy Football
    </li>
    <li id="fifth">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      Find a Job
    </li>
    <li id="sixth">
      <figure>
        <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/cat-icon.png">
      </figure>
      Buy Sell
    </li>
  </ul>

</div>