Jquery CSS How To Use Margin: 0 auto


Tags: jquery,css

Problem :

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?



Solution :

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

margin to center with position fixed

You could also do this with jQuery:

Using jQuery to center a DIV on the screen


    CSS Howto..

    How do I invoke a CSS3 transition using JavaScript?

    How do I create a cut-out hexagon shape?

    How to prevent dynamically appended div from overflowing?

    How can I get the images in my carousel to center?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How to rotate a picture using css and javascript

    How can I get list of all element css attributes with jQuery?

    In firefox, how can I change an existing CSS rule

    How to toggle ng-class

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

    CSS - How do I get my list element to fill 100% of the block

    how to reference background image urls in css through config entrys

    How do I set up the Zurb Foundation icons?

    How to override facebook share button css

    How to force my text to not break into lines in css?

    How to make google maps fit the mobile device screen

    How to center align a div vertically which uses bootstrap?

    How to recalculate the css url paths when moving it to a different folder

    GTK+ 3 CSS: How to specify text alignment for a label?

    How to include css files into compojure project?

    css footer background didn't shows properly in html5

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    CSS selector hierarchy? How to reverse engineer to get the styling?

    How to understand CSS Background-Position coordinates

    Image div showing in Safari, Chrome and IE but not in Firefox

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    how to create circle that cut off one piece with css

    How can I get two buttons and textareas from separate forms to display inline?

    How to toggle a separate drop down beneath a grid of items using JQuery?