Wie zentriere ich ein Bild, wenn die Navigationsleiste kleiner wird?

Question

Ich verwende eine Vorlage zum Erstellen der Website (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), die Original Die Navigationsleiste sieht so aus:

Vor dem Schrumpfen: Navigationsleiste

Nach der Minimierung: Navigationsleiste

Ich habe das Logo in mein Logo geändert. Da mein Logo vertikal kleiner ist, habe ich die Ränder von 10 Pixel auf 20 Pixel geändert

.logo {
    Breite: 40 %;
    Rand: 20px 0px 20px 0;
}

Es sieht zentriert aus: Navigationsleiste

Aber wenn ich auf der Seite nach unten scrolle, verkleinert sich die Navigationsleiste und mein Logo bleibt nicht vertikal zentriert. Es geht nach oben. Navigationsleiste

Ich habe versucht, das CSS zu reparieren, aber es hat nicht funktioniert

.logo {
    Anzeige: Flex;
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
    Breite: 40 %;
    Rand: 20px 0px 20px 0;
}

Dies ist der HTML-Code des Logos

<div class="logo smooth-scroll">
    <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub logo"></a>
</div>

Der Code im CSS steuert die Position beim Herauszoomen, aber selbst wenn ich .logo oder #logo hinzufüge, hilft es nicht.

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav >
        Polsterung oben: 20px;
        Polsterung unten: 20px;
    }
}

Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

你可以使用背景方法 像background-position:center