HTML + ul li對齊中心

Question

我有一個ul li列表，我試圖將li對齊到ul的中心。 我附上我的HTML代碼和CSS。

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

預期輸出：對齊li到ul中心，而不影響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; 
 
} 
 

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

我想我自己，將其調整到中心，我改變了李的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>