CSS position fixed UND margin 0 auto

Also ich habe ein hintergrund-image mit dem folgenden css:

 body{
    background-image:url(cover.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

Und das hintergrund Bild ist 1280 px in der Breite. Also ich möchte meiner Navigationsleiste fixiert und zentriert mit dem hintergrund. Im jedoch in Probleme laufen. Hier ist mein code. 

#navigation {
margin: 0 auto;
position:fixed;
top: 0;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
}

Aber der Navigationsleiste behoben werden, aber nicht zentriert. Wenn ich entfernen Sie die Feste, es wird Mitte, die es aber dann nicht behoben.

Irgendwelche Möglichkeiten, dies zu erreichen?

  • mögliche Duplikate von Position absolute und margin: auto
  • hinzufügen Ausschnitt aus Ihrem html helfen würde
  • wie wäre das hinzufügen von html-Hilfe? <html> <head> <link type="text/css" href="page.css"> </head> <body> <div id="navigation"> </div> </body> </html>
InformationsquelleAutor Jared | 2014-02-27
  1. 15

    können Sie folgende

    #navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}
    • Perfekt! Danke.
    InformationsquelleAutor Moussawi7
  2. 3
    .fixed-centered {
    position: fixed; 
    left: 50%;
    transform: translate(-50%);
}
    InformationsquelleAutor Catalin Enache
  3. 0

    Fixed und auto sind 2 verschiedene Dinge, Sie können nicht nennen Sie beide zusammen. Eine bessere Lösung wäre ein div-container, zentrieren mit margin:0 auto, fügen Sie Ihre hintergrund-code aus dem body zu, und nehmen Sie Sie aus dem Körper, dann machen Sie einen anderen div-Element und setzen Sie Ihre navigation in es. Sie können auch wollen, um eine Höhe auf, die div-container.

    <div class="container">
   <div class="nav">
       <!-- nav here -->
   </div>
</div>
    InformationsquelleAutor Severian
  4. 0

    Erstellen .container div mit style:

    //no float!
width:960px;
possition:relative;
margin:0; //centers

    Dann innerhalb dieses Containers anlegen von fixierten Navigationsleiste 🙂 

    position:fixed;
float:left;
width:100%;
height:50px;

    So, jetzt die navigation-bar-sticks in den container zentriert.

    Einzige Sache, die Sie möglicherweise Bearbeiten müssen, die auf diesem code ist top.

    InformationsquelleAutor Ignas Damunskis
Schreibe einen Kommentar