HTML + ul li alignment center - html

Question

I have a ul li list, I am trying to align li to center of the ul.
I have attached my HTML code and CSS.
Important: On li hover I have added some animation (margin-top).
Expected output: Align li to the center of ul without affecting 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>
I tried my self to align it to center, I changed the CSS of li (float:none), It's working fine but on hover animation is not working.
Please, can anyone help to resolve this.

Answer 1

Remove float:left and add vertical-align: top; to li, by default inline-block elements are aligned to baseline that's why removing margin affects all li elements.
#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>