如何将带有图像嵌入式按钮的基于图像的导航栏居中？

我想将导航栏元素居中。到现在为止，我<li>内部已有三个要素<ul>。

有两个基于图像，一个基于文本，任何人都可以帮我解决这个问题，或者指出为什么它不适合我吗？

我已经忽略了JavaScript，因为我专注于缩进。

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