how to center image based navigation bar with image embedded button? - html

Question

I would like to have my navigation bar elements centered.
As of now, I have got three <li> elements inside <ul>.
Two based on images and one is text
Can anyone help me get this centered or point out why it is not working for me ?
I have ignored the JavaScript as my focus is on indentation.
<div class = "navigationBar">
<ul>
<li><button id="back" onclick="myFunction()"><img src="./img/previous.png"></button> </li>
<li><div id ="currentFileString"> <h2>2/4<h2></div></li>
<li><button id="next"><img src="./img/next.png"></button></li>
</ul>
</div>
CSS:
#header{
font-family: "Al Bayan";
}
.jumbotron{
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
}
.navigationBar{
height: 80px;
padding-bottom: 10px;
align-content: center;
margin : 0 auto;
display: inline;
text-align: center;
vertical-align: center;
}
button{
border: none;
background: none;}
ul {
display: inline;
margin: 0 auto;
/*text-align: center;*/
list-style-type: none;
padding: 10px;
text-align: center;
}
li {
display: inline-block;
text-align:center;
}
.table-striped
{
width: 60%;
}
#tableLeft{
float :left;
width: 40%;
}
#tableright{
float: right;
width: 40%;
}

Answer 1

The answer below. Try this
#header{
font-family: "Al Bayan";
}
.jumbotron{
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
}
.navigationBar{
height: 80px;
padding-bottom: 10px;
align-content: center;
margin : 0 auto;
/*display: inline;*/
text-align: center;
vertical-align: center;
}
button {
border: none;
background: none;}
ul {
display: inline;
margin: 0 auto;
/*text-align: center;*/
list-style-type: none;
padding: 10px;
text-align: center;
}
li {
display: inline-block;
text-align:center;
}
.table-striped
{
width: 60%;
}
#tableLeft{
float :left;
width: 40%;
}
#tableright{
float: right;
width: 40%;
}
<div class = "navigationBar">
<ul>
<li><button id="back" onclick="myFunction()"><img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/prev.png" width="20"></button> </li>
<li><div id ="currentFileString"> <h2>2/4<h2></div></li>
<li><button id="next"><img src="https://cdn4.iconfinder.com/data/icons/flat-black/512/next.png" width="20"></button></li>
</ul>
</div>