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 to Load a css file for html page android web view

    How to add css box-shadow using .style javascript property

    CSS how to height step arrow

    how to have custom css overrule bootstrap

    How do I emulate a page break with CSS and HTML?

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    how to restrict the children element inside the parent element in css?

    How to get On/Off FlipSwitch to trigger function

    How to change buttons to pictures in jquery dialog

    How can i see or how do i know where to put the control according to the screen when using css?

    How to align element based on the other element that is above

    how to remove xlink default styling

    How to style webpage with percentages

    Error: Dynamically fetching css from CDN with fallback to local copy, How to resolve?

    How do I make a element a regular tab stop within a form?

    How to fix css tabs which disappear when header title is too long

    How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

    How to use list tag in single line

    html/css, how to make element padding not cover over previous elements?

    how to set a div to the bottom side in asp.net css

    How to retain rectangular border around button when clicked

    How to use background image in CSS?

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

    How to enable overflow scrolling within a Semantic Ui Grid?

    CSS how to translate an image up, and have the div adjust to the new size?

    How to change the hover pseudo class of an element using jquery

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    how to make smooth css transition

    How to make sidebar always visible in the Semantic UI