jQuery CSS如何使用保证金：0自动

Question

I'm new to Jquery. I want to know how can we use margin: 0 auto; CSS code in jquery scripting. Could anyone please help me out? Here's the code:

<style>
#fixed-bar {
    padding: 0;
    background-color: black;
    z-index: 100;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
  $("#fixed-bar")
    .css({
        "position": "fixed",
        "width": "960px",
        "margin": "0 auto",
        "top": "0px",

})
    .hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
      $('#fixed-bar').fadeIn(200);
    } else {
      $('#fixed-bar').fadeOut(200);
    }
  });
});
</script>
<div id='fixed-bar'>
  Hello
</div>

Actually I want to center the bar. How can I do this?

Answer 1

You are setting everything correct. But you cannot center an element with margin: auto that has position: fixed :

Center a position:fixed element

You could also do this with jQuery:

Using jQuery to center a DIV on the screen

Answer 2

You can't use shorthand CSS with jQuery, you would have to set each margin separately.

css({
    "marginTop": "0",
    "marginRight": "auto",
    "marginBottom": "0",
    "marginLeft": "auto"
})

Answer 3

You can try this :

HTML:

<div id="fixed-bar">
    <p>Test</p>
</div>

CSS:

body {
    position : relative;
}

#fixed-bar {
    padding: 0;
    background-color: black;
    z-index: 100;
    width: 960px;
}

JavaScript:

$("#fixed-bar").css({
                "position" : "absolute",
                "left" : (($(window).width() - $("#fixed-bar").outerWidth()) / 2) + $(window).scrollLeft() + "px" })
               .hide();

$(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
        $('#fixed-bar').fadeIn(200);
    } else {
        $('#fixed-bar').fadeOut(200);
    }
});

This way your element will be horizontally centered regardless of screen size. Don't forget to include jQuery in your HTML.

Answer 4

有更好的方法使用jQuery将div居中，例如将其设置为绝对位置并查找其宽度，视口宽度，并根据这些数字设置偏移量：

$('.mydiv').css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");