Comment centrer une image lorsque la barre de navigation rétrécit ?

Question

J'utilise un modèle pour créer le site Web (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), le original La barre de navigation ressemble à ceci :

Avant le rétrécissement : Barre de navigation

Après minification : Barre de navigation

J'ai remplacé le logo par mon logo. Comme mon logo est plus petit verticalement, j'ai modifié les marges de 10px à 20px

.logo {
    largeur : 40 % ;
    marge : 20px 0px 20px 0 ;
}</pré>
<p>Il semble centré :
Barre de navigation</p>
<p>Mais lorsque je fais défiler la page vers le bas, la barre de navigation se rétrécit et mon logo ne reste pas centré verticalement. Ça monte.
Barre de navigation</p>
<p>J'ai essayé de corriger le CSS, mais cela n'a pas fonctionné</p>
<pre class="brush:php;toolbar:false;">.logo {
    affichage : flexible ;
    justifier-contenu : centre ;
    aligner les éléments : centre ;
    largeur : 40 % ;
    marge : 20px 0px 20px 0 ;
}</pré>
<p>Voici le code html du logo</p>
<pre class="brush:php;toolbar:false;"><div class="logo smooth-scroll">
    <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="logo boxinghub"></a>
</div>

Le code dans le CSS contrôle la position lors d'un zoom arrière, mais même si j'ajoute .logo ou #logo, cela n'aide pas.

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav >
        rembourrage supérieur : 20 px ;
        rembourrage en bas : 20 px ;
    }
}
Merci d'avance pour votre aide ! 
            

Answer 1

Vous pouvez utiliser la méthode d'arrière-plan Comme background-position:center