Warum kann ich mein Navigationsmenü nicht zentrieren?

Meine Testseite hier funktioniert gut, ich glaube (habe es noch nicht in allen Browsern getestet, aber meine Hauptnavigation an der Spitze zentriert nicht. Es gibt eine Lücke dort in der Mitte, weil das Logo dorthin gehen wird, aber ich habe es nicht für diesen Test in der Art und Weise wollen.Warum kann ich mein Navigationsmenü nicht zentrieren?

Warum Zentrierung nicht meine Navigation ist?

CSS

#main-navigation { width: 100%; height: 70px;font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; font-size: 1em; letter-spacing: 2px; line-height: 35px; margin: 0 auto;} 
    #main-navigation ul { width: 289px; list-style: none; } 
    #main-navigation li { float: left ;margin-left: 12px; } 
    #main-navigation li a { display: block; text-decoration: none; color: #fff; } 
    #main-navigation li a:hover { color: #c7bd89; } 
    #main-nav-left{ list-style: none; float: left; border: 1px solid #6F0; } 
    #main-nav-right{ list-style: none; float:right; border: 1px solid #6F0; } 

header { width: 960px; margin: 0 auto; display: inline-block; /*border: 1px solid #000;*/}

HTML

<header> 
    <nav id="main-navigation"> 
      <ul id="main-nav-left"> 
       <li class="current"><a href="#">Home</a></li> 
       <li><a href="#">Areas of Practice</a></li> 
      </ul> 
      <!-- <a href="http://averylawoffice.ca/"><img class="averylogo" src="img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office"></a>--> 
      <img class="banner" src="img/BANNER1-averylawoffice.jpg" alt="Banner 1"> 

      <ul id="main-nav-right"> 
       <li class="current"><a href="#">Contact</a></li> 
       <li><a href="#">Blog</a></li> 
      </ul> 

     </nav> 

</header>

Wie Sie sehen, habe ich bereits "margin: 0 auto;" drin. Ich bin verwirrt, warum es nicht funktioniert.

This is the site

Allerdings, wenn ich herausnehmen display: inline-block; Es funktioniert gut, aber wenn es auf meinem lokalen Wordpress-Thema aktualisiert wird, bewegt es sich sehr nach unten.

enter image description here

@Quoo: Wissen Sie, warum dies könnte für die CSS, um es geschehen ist gerade jetzt. Wäre das eine Frage für Wordpress.StackExchange?

Quelle

2012-03-30 kia4567

entfernen display: inline-blck – Ibu

text-align: center; – Connor

Hallo, Sie können Ihre Header-Anzeige definieren: Tabelle; wie ähnlich

header { 
width: 960px; 
margin: 0 auto; 
display: table; 
}

Quelle

2012-03-31 04:33:56

das hat funktioniert! Warum hat das funktioniert? Ich liebe es! – kia4567

Sie wollen Anzeige: Block nicht anzeigen: Inline-Block auf Ihrem Header-Element.

Quelle

2012-03-30 20:43:05 quoo

, die beachtet werden sollte, ist der Standard-Anzeigewert eines Header-Elements, so dass Sie es nicht wirklich angeben müssen. – quoo

Danke für die Heads-up, aber es vermasselt sich dann auf andere Weise. Ich habe die ursprüngliche Frage bearbeitet, um hinzuzufügen, was gerade passiert. – kia4567

Wenn Sie nur die Anzeige entfernen: Inline-Block ;, funktioniert es gut für mich. Etwas anderes, das Sie nicht gepostet haben, muss Ihr anderes Problem verursachen. –

Hallo brauchen Sie keine Sache in Ihrer Header-Klasse bei Bedarf Navigation in der Mitte hinzufügen, so wird es mit der Arbeit Ihrer margin: auto; & Breite: 960px; wie unter Beispiel erwähnt: -

header { 
width: 960px; 
margin: 0 auto; 
}

Ihre Navigation im Zentrum nach oben css kommen .....

Quelle

2012-03-31 08:39:43

Warum kann ich mein Navigationsmenü nicht zentrieren?

Antwort

Verwandte Themen