Centering an anchor tag inside a div

Question

I have an anchor containing an image that I want to center within a div tag of the bootstrap navbar

The height and width of the image is unknown so I'd like to center it horizontally and vertically without having to calculate padding

<div class="navbar-header">
    <a class="navbar-left" href="index.html"><span role="link" class="logo"></span></a>
</div>

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
}

.navbar-left{
    float: left!important;
}

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    text-indent: -9999px;
}

And you've already tried the answers here: http://stackoverflow.com/questions/27037514/how-to-center-brand-image-in-navbar and here: http://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar — Carol Skelly, Apr 13 '17 at 13:07

Daniel Sixl · Answer 1 · 2020-03-06T15:51:46.513

I highly recommend the following article: https://css-tricks.com/centering-css-complete-guide/

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
    background-color: rgba(255,0,0,0.1);
    position: relative;
}

.navbar-left{
    /* float: left!important; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo {
    background-image: url(https://picsum.photos/id/10/555/153);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}

<div class="navbar-header">
    <a class="navbar-left" href="index.html">
      <span role="link" class="logo"></span>
    </a>
</div>

score 0 · Answer 2 · answered Apr 13 '17 at 13:06

Remove this CSS

.navbar-left{
    float: left!important;
}

Add margin 0 auto on logo

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0 auto;/*Edit This*/
    text-indent: -9999px;
}

Centering an anchor tag inside a div

2 Answers2