Wie zentriere ich ein Bild, wenn die Navigationsleiste kleiner wird?
P粉647504283
P粉647504283 2023-08-18 11:05:33
0
1
458
<p>Ich verwende eine Vorlage zum Erstellen der Website (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), die Original Die Navigationsleiste sieht so aus: </p> <p>Vor dem Schrumpfen: Navigationsleiste</p> <p>Nach der Minimierung: Navigationsleiste</p> <p>Ich habe das Logo in mein Logo geändert. Da mein Logo vertikal kleiner ist, habe ich die Ränder von 10 Pixel auf 20 Pixel geändert</p> <pre class="brush:php;toolbar:false;">.logo { Breite: 40 %; Rand: 20px 0px 20px 0; }</pre> <p>Es sieht zentriert aus: Navigationsleiste</p> <p>Aber wenn ich auf der Seite nach unten scrolle, verkleinert sich die Navigationsleiste und mein Logo bleibt nicht vertikal zentriert. Es geht nach oben. Navigationsleiste</p> <p>Ich habe versucht, das CSS zu reparieren, aber es hat nicht funktioniert</p> <pre class="brush:php;toolbar:false;">.logo { Anzeige: Flex; rechtfertigen-Inhalt: Mitte; align-items: center; Breite: 40 %; Rand: 20px 0px 20px 0; }</pre> <p>Dies ist der HTML-Code des Logos</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>Der Code im CSS steuert die Position beim Herauszoomen, aber selbst wenn ich .logo oder #logo hinzufüge, hilft es nicht. </p> <pre class="brush:php;toolbar:false;">@media (min-width:768px) { .fixed-header-on .navbar-default .navbar-nav > Polsterung oben: 20px; Polsterung unten: 20px; } }</pre> <p>Vielen Dank im Voraus für Ihre Hilfe! </p>
P粉647504283
P粉647504283

Antworte allen(1)
P粉898049562

你可以使用背景方法 像background-position:center

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!