Center two lis inside ul horizontally - html

Question

I have two lis inside a ul. And I'm not able to make the lis center.
I can center the li by giving fixed width to it. Can it be done without giving fixed width?
.PhNumber_email_list {
display: inline-block;
clear: both;
padding: 10px 0px;
width: 100%;
margin: 0 auto;
max-width: 700px;
border: 2px solid black;
}
.PhNumber_email_list li {
list-style: none;
float: left;
margin: 5px 20px;
position: relative;
}
.PhNumber_email_list li input {
border: 2px solid #196edf;
width: 100%;
padding: 15px 5px;
color: #3f3f3f;
text-align: center;
font-weight: 700;
}
<ul class="PhNumber_email_list">
<li>
<input type="text" placeholder="Email">
<p class="hint">Your email is kept private and secure</p>
</li>
<li>
<input type="text" class="PhNumber_mask" placeholder="Phone Number (Optional)">
<p class="hint">Get exclusive support</p>
</li>
</ul>
Heres the fiddle

Answer 1

demo - http://jsfiddle.net/99stwpnp/3/
use box-sizing:border-box for input so that the padding is calculated from inside
and instead of float:left use display:inline-block so that you center it without giving width
.PhNumber_email_list {
display: inline-block;
clear: both;
text-align: center;
padding: 10px 0px;
width: 100%;
margin: 0 auto;
max-width: 700px;
border: 2px solid black;
}
.PhNumber_email_list li {
list-style: none;
display: inline-block;
margin: 5px 20px;
position: relative;
}
.PhNumber_email_list li input {
border: 2px solid #196edf;
width: 100%;
box-sizing: border-box;
padding: 15px 5px;
color: #3f3f3f;
text-align: center;
font-weight: 700;
}
<ul class="PhNumber_email_list">
<li>
<input type="text" placeholder="Email">
<p class="hint">Your email is kept private and secure</p>
</li>
<li>
<input type="text" class="PhNumber_mask" placeholder="Phone Number (Optional)">
<p class="hint">Get exclusive support</p>
</li>
</ul>

Answer 2

If using a percentage for the width of the <li> is ok I think you can. In the following example I've added box-sizing: border-box to the li and the li input to include the padding and the border size in the width. I've added a width: 50% to the li and changed the margin into a padding.
.PhNumber_email_list {
display: inline-block;
padding: 10px 0px;
width: 100%;
margin: 0 auto;
max-width: 700px;
border: 2px solid black;
}
.PhNumber_email_list li {
box-sizing: border-box;
list-style: none;
float: left;
padding: 5px 20px;
width: 50%;
}
.PhNumber_email_list li input {
box-sizing: border-box;
border: 2px solid #196edf;
width: 100%;
padding: 15px 5px;
color: #3f3f3f;
text-align: center;
font-weight: 700;
}
<ul class="PhNumber_email_list">
<li>
<input type="text" placeholder="Email">
<p class="hint">Your email is kept private and secure</p>
</li>
<li>
<input type="text" class="PhNumber_mask" placeholder="Phone Number (Optional)">
<p class="hint">Get exclusive support</p>
</li>
</ul>