Center only the middle <li> - html

Question

My fiddle so far:
https://jsfiddle.net/dzjqor2d/
I just can't get the middle <li> to center, whatever I try.
My Code:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child {
float: right;
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
Note:
Content is dynamic, so is the width of the container

Answer 1

make first li to left and last to right rest will float as per ul's text-alignment:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align: center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child{
float:right;
}
ul li:first-child{
float: left;
}
demo

Answer 2

You shouldn't need to float the last li right, use margins to get the alignments right:
ul li {
margin: 0 20px;
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
https://jsfiddle.net/dzjqor2d/8/

Answer 3

You may try using the CSS3 :nth-child() Selector with your ul and li tag
HTML
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
CSS
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align:center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:nth-child(1){
float:left;
}
ul li:nth-child(3){
float:Right;
}

Answer 4

These days flexbox is the way to go, in the past floating was great, but now not so much.
for the UL I've added display: flex; and justify-content: space-between; this means; make them all fit in one block and if there is extra space, just put have space between them.
Here have a look:
body {
margin: 0;
}
ul {
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
I've changed the width to make the example easier to see.
Hope this helps.

Answer 5

Just use below css for ul:
ul {width: 70%;overflow: auto;background-color: #F5FAFF;padding:20px;display: flex;}