Center image inside anchor tag - html

Question

Need to center image inside anchor tag. Tried margin: 0 auto;. But not worked.
Here is the fiddle.
I am using bootstrap and a custom css.

Answer 1

.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
Achieved with this.

Answer 2

a.navbar-brand {
text-align: center;
display: inline-table;
position: relative;
}
and if neccessary only remove the padding <div class="container-fluid" style="padding-bottom: 30px"> or make it padding-bottom:0;
Fiddle
thanks

Answer 3

Make the tag display:block; width:100%, and then set the image with margin:0 auto:
.navbar-brand {
display:block;
width:100%;
}
.navbar-brand img {
margin:0 auto;
}
FIDDLE

Answer 4

Remove the bootstrap class "navbar-brand"
and replace with the following class
https://jsfiddle.net/y0yL3gna/3/
.class-name{
text-align: center;
display: block;
}
And html will be
<div class="wrapper">
<div class="container">
<nav class="navbar bgcol col_org">
<div class="container-fluid" style="padding-bottom: 30px">
<div class="navbar-header">
<a class="class-name" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" alt="flower"></a>
</div>
</div>
</nav>
</div>
</div>

Answer 5

Remove float and set display:block for anchor tag and margin: 0 auto will work for img tag.
.navbar-brand {
display:block;
}
.navbar-brand img {
margin: 0 auto;
}

Answer 6

I just modified some html, with your style. Try this!
.wrapper {
background: #ccc;
padding-bottom: 10px;
}
.container {
background-color: #FFF;
box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
}
.bgcol {
/*background-color: #1d3179;*/
background-color: #000000;
border: #fff;
color: fff
}
.bgcol .navbar-toggle .icon-bar {
background-color: #FFF;
}
.bgcol a {
color: #FFF;
}
.col_org {
background: #1d3179;
}
.col_org:hover {
background: #1d3179;
}
<div class="wrapper">
<div class="container">
<nav class="navbar bgcol col_org">
<div class="container-fluid" style="padding-bottom: 30px">
<div class="navbar-header">
<a class="" style=" width: 100%; display: block;" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" style="margin: auto; display: block;" alt="flower"></a>
</div>
</div>
</nav>
</div>
</div>