Center image in ul - html

Question

Tried to google this but didn't find anything that helped me.
So I have button-text on the left and right but I want to center an image inside the top bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li><a class="image" href="#"><img src="https://dummyimage.com/150X38/000/fff"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>
so what I basicly want is the image (class="image") to be centered, but the rest as it is.
Thanks alot!

Answer 1

Do it like this
Remove image class from a tag and give image class to it's parent li and try this with this example. it will helps you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
li.image {
float: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li class='image'><a class="" href="#"><img src="../image/image.png"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>

Answer 2

a.image {
display: block;
margin-left: auto;
margin-right: auto
}
try adding that code in your css file . Also try have a look here
it has more info about centering things .

Answer 3

I used display:flex and flex property. by setting display: flex:0 I'm telling the browser I want this element take just the place he need, and with flex:1 on a single element I'm telling that I want it to take all the possible place
div.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
display: flex;
}
div.left-part, div.right-part {
flex: 0;
display:inline-block;
white-space: nowrap;
}
div.center-part {
flex: 1;
text-align: center;
}
div.nav-button {
display:inline-block;
}
div.nav-button a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.nav-button a:hover:not(.active) {
background-color: #ddd;
}
div.nav-button a.active {
color: white;
background-color: #3744a2;
}
<div class="nav">
<div class="left-part"><div class="nav-button">home</div>
<div class="nav-button">news</div>
<div class="nav-button">services</div>
<div class="nav-button"><a class="active" href="#">prices</a></div>
<div class="nav-button">contat</div>
</div>
<div class="center-part">
<div class="nav-button"><a class="image" href="#"><img src="../image/image.png"></a></div>
</div>
<div class="right-part">
<div class="nav-button"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</div>
<div class="nav-button"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</div>
</div>
</div>