HTML + ul li对齐中心

Question

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

重要提示：在li hover上我添加了一些动画（margin-top）。

预期输出：将li与ul的中心对齐而不影响li，

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我尝试将自己与中心对齐，我改变了li的CSS（浮点数：无），它的工作正常，但悬停动画无法正常工作。 请帮助解决这个问题。

Answer 1

删除float:left并将vertical-align: top;添加到li，默认情况下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>