Zentrieren einen Anker-Tag in einem div

Question

Ich habe einen Anker ein Bild enthält, die ich

Die Höhe und Breite des Bildes innerhalb eines div-Tages der Bootstrap-navbar zum Zentrum will, ist unbekannt, so würde ich zum Zentrum mag es horizontal und vertikal ohne Polsterung

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

Answer 1

entfernen sie diese CSS

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

hinzufügen Marge 0 auto auf das logo

berechnet werden müssen

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

Answer 2

ich den folgenden Artikel empfehlen: 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(http://fillmurray.com/200/300); 
 
    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>