HTML + ul liアライメントセンター

Question

私はul liリストを持っています。liをulの中心に揃えようとしています。 私は自分のHTMLコードとCSSを添付しています。

重要：li hoverにアニメーション（margin-top）を追加しました。

予想される出力：、私は李のCSSを変更（フロート

私は中央に配置するために私の自己を試してみました

#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に影響を与えることなく、 ulの中心に liを揃えます： none）、正常に動作していますが、ホバーアニメーションが機能していません。 これを解決するには誰でも助けてください。

Answer 1

float:leftを取り外し、inline-block要素を取り除くマージンがすべてli要素に影響する理由のベースラインに整列され、デフォルトでは、liにvertical-align: top;を追加します。

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