CODEWITHSUNDEEP
htmlcss
Athul Muralidharan
Athul Muralidharan

Reputation: 753

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

Upvotes: 1

Views: 43

Answers (1)

Saravana
Saravana

Reputation: 3496

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>

Upvotes: 1

Related Questions