<p>我正在使用一個模板來建立網站（https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template），原始的導覽列看起來像這樣：</p> <p>在縮小之前： 導覽列</p> <p>縮小之後： 導覽列</p> <p>我把logo改成了我的logo。因為我的logo垂直較小，所以我把邊距從10px改為20px</p> <pre class="brush:php;toolbar:false;">.logo { width: 40%; margin: 20px 0px 20px 0; }</pre> <p>它看起來像是居中了： 導覽列</p> <p>但是當我向下捲動頁面時，導覽列會縮小，我的logo不會保持垂直居中。它會上移。 導覽列</p> <p>我試著修復css，但沒有效果</p> <pre class="brush:php;toolbar:false;">.logo { display: flex; justify-content: center; align-items: center; width: 40%; margin: 20px 0px 20px 0; }</pre> <p>這是logo的html代碼</p> <pre class="brush:php;toolbar:false;"><div class="logo smooth-scroll"> <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub logo"></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 { padding-top: 20px; padding-bottom: 20px; } }</pre> <p>提前感謝您的幫忙！ </p>