CSS: Wie man ein unten festgelegtes Menü zentriert

Question

Ich habe eine Menüleiste gemacht, die ich unten in der Mitte der Seite fixiert haben möchte. Ich habe alles versucht. Gibt es eine Möglichkeit, dies in CSS zu tun? Ich habe das Menü bekommen am unteren Rand der Seite fixiert werden mit

unten: 0px position: fixed

aber mit

margin: auto auto 0px auto oder margin-left: auto

scheint das Menü nicht zu zentrieren. Es ist nur auf der linken Seite der Seite fest. Irgendwelche Gedanken würden sehr geschätzt werden!

Answer 1

ein Element zu zentrieren Sie Breite und Set linken und rechten Rand auf Auto angeben müssen. Um dann ein solches Element an den unteren Rand der Seite zu kleben, müssen Sie es in ein anderes Element mit fester Breite, sagen wir 100%, einwickeln, das sich unten befindet. Und ja, du kannst es.

<section style="position: fixed; bottom: 0px; width: 100%;"> 
<p style="margin: 0 auto; width: 300px;">Blah blah</p> 
</section> 

Answer 2

#myElemId { 
    width: 100px; 
} 

Beachten Sie die feste Breite; Dies ist wichtig für margin: auto zu arbeiten. Wenn dies das Problem nicht löst, muss es anderswo ein Problem geben.

Edit: Sie werden auch diese (jQuery) benötigen:

$("#myElemId").css({ 
    left: window.innerWidth/2 - $(this).css("width")/2 
}); 

Auf diese Weise können Sie die Breite setzen, was auch immer Sie wollen, ohne den Rest des CSS-Code aktualisieren zu müssen.

Answer 3

Sie können eine linke Eigenschaft von 50% und einen negativen linken Rand verwenden, der der halben Breite der Fußzeile entspricht.

http://jsfiddle.net/N7MB5/

#footer { 
    width: 600px; 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
    margin-left: -300px; 
}