CSS-Menü-Center-Positionierung

Question

Ich lerne HTML/CSS. Ich möchte eine dumme Frage stellen. Ich habe meinen Kopf

positioniere

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 

es in der Mitte, jetzt will ich ein Untermenü positionieren, die ein bisschen kürzer als Header ist und auch im Zentrum sein wird, aber ich kann nicht . Bitte helfen Sie mir, meine Fähigkeiten zu verbessern. Danke im Voraus!

Answer 1

Wenn ich richtig verstehe, sollten Sie das tun.

Auf der HTML-Seite würde ich eine Kopfzeile erstellen, die sowohl Ihre Kopfzeile und Ihr Untermenü umschließt. Dies um alles zu zentrieren. Sie werden sich mit folgenden

<div id="container"> 
    <div id="header"> 

    </div> 

    <div id="submenu"> 

    </div> 
</div> 

auf der CSS-Seite beenden Sie das gleiche tun würde, wie Sie mit dem Header haben, aber dieses Mal würden Sie die Zentrierung Strategie für alle drei div-Tags anwenden. Dies wird zuerst den Behälter zentrieren und dann die inneren Elemente innerhalb des Behälters selbst zentrieren. Dies wäre das CSS, mit dem Sie enden könnten.

#container { 
    margin: 0% auto; 
} 

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 
#submenu { 
    margin: 0% auto; 
} 

Dies ist die naive Art zu implementieren, was Sie wollen. Eine elegantere Lösung wäre die Verwendung von Klassen. Es wird Ihnen Zeit ersparen, wiederholtes CSS zu schreiben und kann immer wieder verwendet werden. Schließlich Klassen verwenden, das ist, was Sie am Ende mit

<div id="container" class="center"> 
     <div id="header" class="center"> 

     </div> 

     <div id="submenu" class="center"> 

     </div> 
    </div> 

.center { 
    margin: 0% auto; 
} 

#header { 
    text-align: left; 
    width: 1280px; 
} 

Hoffen, dass dies hilft.

Auch http://www.w3schools.com/ ist eine Ressource

Answer 2

die Geige sehen

Geige: http://jsfiddle.net/uyECX/3/

Demo: http://jsfiddle.net/uyECX/3/embedded/result/