Bagaimana untuk memusatkan imej apabila bar navigasi mengecut?

Question

Saya menggunakan templat untuk membina tapak web (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), asal Bar navigasi kelihatan seperti ini:

Sebelum mengecut: Bar navigasi

Selepas minifikasi: Bar navigasi

Saya menukar logo kepada logo saya. Memandangkan logo saya lebih kecil secara menegak, saya menukar jidar daripada 10px kepada 20px

.logo {
    lebar: 40%;
    jidar: 20px 0px 20px 0;
}

Ia kelihatan berpusat: Bar navigasi

Tetapi apabila saya menatal ke bawah halaman, bar navigasi mengecut dan logo saya tidak kekal di tengah menegak. Ia bergerak ke atas. Bar navigasi

Saya cuba membetulkan css, tetapi ia tidak berjaya

.logo {
    paparan: flex;
    justify-content: pusat;
    align-item: tengah;
    lebar: 40%;
    jidar: 20px 0px 20px 0;
}

Ini ialah kod html logo

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

Kod dalam css mengawal kedudukan apabila dizum keluar, tetapi walaupun saya menambah .logo atau #logo, ia tidak membantu.

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav >
        padding-top: 20px;
        padding-bawah: 20px;
    }
}

Terima kasih terlebih dahulu atas bantuan anda!

Answer 1

Anda boleh menggunakan kaedah latar belakang Seperti latar belakang-kedudukan:tengah