<p>ウェブサイト (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template) を構築するためにテンプレートを使用しています。オリジナル ナビゲーション バーは次のようになります: </p> <p>縮小前: ナビゲーションバー</p> <p>縮小後: ナビゲーションバー</p> <p>ロゴを自分のロゴに変更しました。私のロゴは縦方向に小さいため、余白を 10 ピクセルから 20 ピクセルに変更しました</p> <pre class="brush:php;toolbar:false;">.logo { 幅: 40%; マージン: 20px 0px 20px 0; }</pre> <p>中央に配置されているように見えます: ナビゲーションバー</p> <p>しかし、ページを下にスクロールすると、ナビゲーション バーが縮小し、ロゴが垂直方向の中央に留まりません。上に移動します。 ナビゲーションバー</p> <p>CSS を修正しようとしましたが、うまくいきませんでした</p> <pre class="brush:php;toolbar:false;">.logo { ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 幅: 40%; マージン: 20px 0px 20px 0; }</pre> <p>これはロゴの HTML コードです</p> <pre class="brush:php;toolbar:false;"><div class="ロゴスムーズスクロール"> <a href="#banner"><img id="ロゴ" src="images/boxinghub.png" alt="boxinghub ロゴ"></a> </div></pre> <p>CSS内のコードでズームアウト時の位置を制御していますが、.logoや#logoを追加しても役に立ちません。 </p> <pre class="brush:php;toolbar:false;">@media (min-width:768px) { .fixed-header-on .navbar-default .navbar-nav > li > a { パディングトップ: 20px; パディングボトム: 20px; } }</pre> <p>よろしくお願いいたします。 </p>