ナビゲーション バーが縮小したときに画像を中央に配置するにはどうすればよいですか?

Question

ウェブサイト (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template) を構築するためにテンプレートを使用しています。オリジナル ナビゲーション バーは次のようになります:

縮小前: ナビゲーションバー

縮小後: ナビゲーションバー

ロゴを自分のロゴに変更しました。私のロゴは縦方向に小さいため、余白を 10 ピクセルから 20 ピクセルに変更しました

.logo {
    幅: 40%;
    マージン: 20px 0px 20px 0;
}

中央に配置されているように見えます: ナビゲーションバー

しかし、ページを下にスクロールすると、ナビゲーション バーが縮小し、ロゴが垂直方向の中央に留まりません。上に移動します。 ナビゲーションバー

CSS を修正しようとしましたが、うまくいきませんでした

.logo {
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
    幅: 40%;
    マージン: 20px 0px 20px 0;
}

これはロゴの HTML コードです

<div class="ロゴスムーズスクロール">
    <a href="#banner"><img id="ロゴ" src="images/boxinghub.png" alt="boxinghub ロゴ"></a>
</div>

CSS内のコードでズームアウト時の位置を制御していますが、.logoや#logoを追加しても役に立ちません。

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav > li > a {
        パディングトップ: 20px;
        パディングボトム: 20px;
    }
}

よろしくお願いいたします。

Answer 1

バックグラウンドメソッドを使用できます 背景位置:center

と同様