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

I would like to have my navigation bar elements centered. As of now, I have got three

• elements inside .

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%;
}