CSS: allign horizontally two elements of a list - css

Question

I'm trying to create a box containing a picture on the top and two buttons at the bottom. The two buttons have to stay inline and centered (at least horizontally).
This is the HTML code:
<div id="box1">
<p>Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="popinfo2">
<div>
<img src="http://imageenvision.com/450/18963-sweaty-woman-skipping-or-dancing-during-cardio-exercise-at-the-gym-clipart-by-djart.jpg">
</div>
<div>
<ul>
<li>P</li>
<li>P</li>
</ul>
</div>
</div>
and this the CSS:
body{
background: sandybrown;
height: 300px;
width: 90%;
}
#box1{
position: relative;
background: mediumseagreen;
padding: 0; margin: 0;
width: 60%;
height: 100%;
float: left;
}
#popinfo2{
position: relative;
background: plum;
height: 100%;
width: 40%;
float: left;
}
#popinfo2 div{
position: relative;
background: lightseagreen;
padding: 0;
display: block;
margin: auto;
vertical-align: middle;
}
#popinfo2 div:first-of-type{
width: 35%;
height: 75%;
}
#popinfo2 div:nth-of-type(2){
width: 100%;
height: 25%;
}
#popinfo2 div img{
background: aliceblue;
position: relative;
padding: 0; border: 0;
display : block;
margin: auto;
vertical-align: middle;
width: 100%;
height: 100%;
}
/*#popinfo2 div div{
background: dodgerblue;
height: 50%;
width: 80%;
padding: 0; margin: auto;
}*/
#popinfo2 div ul{
position: relative;
background: yellow;
float: left;
width: 100%;
height: 100%;
margin: 0; padding: 0;
text-align: center;
}
#popinfo2 div ul li {
position: relative;
float: left;
list-style: none;
position: relative;
padding: 0.5em;
margin: auto;
}
#popinfo2 div ul li a {
float: left;
padding: 0.5em 3.5em;
text-decoration: none;
color: white;
background: brown;
width: 2em;
}
The only way I found was to insert a left margin inside the li tag. I don't really like it as it takes the reason of using the percentage off.

Answer 1

you should use display:inline-block instead of float for <li> if you want to center horizontaly :
http://codepen.io/anon/pen/rKBeE
float kills display and send things to the extrem right or left of its container , it is not fully in the flow anymore.

Answer 2

Here is the DEMO
Firstly, use inline-block for the li, then text-align: center; will work.
Secondly, check your code wisely - you set float:left; to the <a> tags inside floated li's.