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