如何使用图像嵌入按钮居中基于图像的导航栏？

Question

我想让导航栏元素居中。 截至目前，我在<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%;
}

Answer 1

以下答案。试试这个

#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>