Bagaimana untuk memusatkan imej apabila bar navigasi mengecut?
<p>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: </p>
<p>Sebelum mengecut:
Bar navigasi</p>
<p>Selepas minifikasi:
Bar navigasi</p>
<p>Saya menukar logo kepada logo saya. Memandangkan logo saya lebih kecil secara menegak, saya menukar jidar daripada 10px kepada 20px</p>
<pre class="brush:php;toolbar:false;">.logo {
lebar: 40%;
jidar: 20px 0px 20px 0;
}</pre>
<p>Ia kelihatan berpusat:
Bar navigasi</p>
<p>Tetapi apabila saya menatal ke bawah halaman, bar navigasi mengecut dan logo saya tidak kekal di tengah menegak. Ia bergerak ke atas.
Bar navigasi</p>
<p>Saya cuba membetulkan css, tetapi ia tidak berjaya</p>
<pre class="brush:php;toolbar:false;">.logo {
paparan: flex;
justify-content: pusat;
align-item: tengah;
lebar: 40%;
jidar: 20px 0px 20px 0;
}</pre>
<p>Ini ialah kod html logo</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>Kod dalam css mengawal kedudukan apabila dizum keluar, tetapi walaupun saya menambah .logo atau #logo, ia tidak membantu. </p>
<pre class="brush:php;toolbar:false;">@media (min-width:768px) {
.fixed-header-on .navbar-default .navbar-nav >
padding-top: 20px;
padding-bawah: 20px;
}
}</pre>
<p>Terima kasih terlebih dahulu atas bantuan anda! </p>
