Home  >  Q&A  >  body text

How to center an image when the navigation bar shrinks?

<p>I am using a template to build the website (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), the original The navigation bar looks like this: </p> <p>Before shrinking: Navigation bar</p> <p>After minification: Navigation bar</p> <p>I changed the logo to my logo. Since my logo is smaller vertically, I changed the margins from 10px to 20px</p> <pre class="brush:php;toolbar:false;">.logo { width: 40%; margin: 20px 0px 20px 0; }</pre> <p>It looks centered: Navigation bar</p> <p>But when I scroll down the page, the navigation bar shrinks and my logo doesn't stay vertically centered. It moves up. Navigation bar</p> <p>I tried to fix the css, but it didn’t work</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>This is the html code of the 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>The code in the css controls the position when zoomed out, but even if I add .logo or #logo, it doesn't help. </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>Thanks in advance for your help! </p>
P粉647504283P粉647504283449 days ago511

reply all(1)I'll reply

  • P粉898049562

    P粉8980495622023-08-19 09:04:42

    You can use the background method Like background-position:center

    reply
    0
  • Cancelreply