Logo Image Centered & Menüleiste Unten Logo

Question

Das Logo einer Website, die ich gerade arbeite, erscheint auf der linken Seite, aber ich möchte, dass es zentriert wird. Wie kann ich darüber gehen? Finden Sie unter dem CSS-Code.

header .logo{ display: inline-block; padding: 0; vertical-align: middle;}

Auch die Menüleiste auf der rechten Seite des Logos erscheinen, aber ich will es zentriert und unter dem Logo werden. Wie kann ich das machen?

.nav-right-area{ display: inline-block; vertical-align: middle;} 
 
.navigation{ display: inline-block; vertical-align: middle;} 
 
.navigation > ul{ margin-top: 0px;} 
 
.navbar{ margin-bottom: 0; min-height: inherit;}

Bild, wenn der Header der Stelle, wo das Logo und das Menü zeigt unten ist:

Link zur Website ist http://midwaycinema7.com/

Heads up wird geschätzt.

Answer 1

Besser bieten vollständige HTML-Layout. oder Code unten ist etwas, was Sie tun können, Logo und Menü zu gelangen horizontal zentriert:

Für Logo:

header .logo{ display: block; width: 50%; margin: auto auto; padding: 0;} 

Navigationsmenü sollte innerhalb des äußeren Elements mit Balg css gewickelt werden:

.navigation-wrap{ display: block; min-width: 50%; margin: auto auto; } 

---

Dies ist nur eine Idee, versuchen Sie es nach Ihrem Code anzupassen.

Answer 2

Es gibt ein paar Möglichkeiten, dies zu tun.

1. Mit Flex.

   .divHoldingYourLogo{ 
       display:flex; 
       justify-content: center; 
   } 
   

2. Mit Zentrum Tag.

   <div> 
       <center> 
        <img src="logo.jpg" class="YOUR CLASSES"> 
       </center> 
   </div> 
   

   Aber nicht jetzt verwendet.

   3.Using margin:auto

   .divHoldingYourLogo{ 
       display:block; 
   } 
   
   #logo{ 
   margin:auto; 
   } 
   

   4. Mit JQuery

Sie können es auch tun, indem sie die $ bekommen (Fenster) .width() und dividiere es durch 2 und setze das auf die margin-left oder im Falle position:absolute die propertyleft mit diesem Wert.

So gibt es viele Lösungen dazu. Sie können den Ansatz wählen, der Ihren Anforderungen entspricht.

Answer 3

konnte ich Ihre div über das Menü auf dem http://midwaycinema7.com/about/ Link, den Sie ursprünglich vorgesehen zum Zentrum und zu erhöhen, hier ist meine Lösung:

Gehen Sie zu Ihrem CSS, die

.main-head .col-lg-2 { 

} 

Regel finden und display: inline-block; ändern zu display: block;. Fügen Sie auch eine width: initial; hinzu. Ihre HTML-Elemente und Ihr CSS sind irgendwie verschachtelt worden und die Verwendung von width: initial war eine Möglichkeit, wie ich diese Breite zurücksetzen konnte, so dass Ihr Logo dead-center ist.