Jquery CSS How To Use Margin: 0 auto

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?

Why are you trying to style the bar with jQuery? If at all possible, you should keep your styles in CSS. — chipcullen, Apr 25 '12 at 14:40
I'm not able to center the bar. Can you please post the working code, either with CSS or style the bar with jquery? I'd appreciate your help. — John Carter, Apr 25 '12 at 14:42
It's time for you to evaluate the differences between just setting your style with CSS and using jQuery/JavaScript to over-ride a CSS style. — Sparky, Apr 25 '12 at 14:47

score 2 · Accepted Answer · edited May 23 '17 at 12:00

2

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

edited May 23 '17 at 12:00

Community

1
1

answered Apr 25 '12 at 14:43

binarious

4,568
26
35

Thanks Binarious. Yes, we cannot center an element with margin: auto that has position: fixed:. But adding left:0 and right:0 to it works :) Thanks again. Here're the changes I made to the CSS file above. [code]#fixed-bar { position:fixed; margin-left: auto; margin-right: auto; padding: 0; background-color: black; z-index: 100; left:0; right:0;[code] – John Carter Apr 25 '12 at 14:57

score 1 · Answer 2 · answered Apr 25 '12 at 14:47

1

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"
})

answered Apr 25 '12 at 14:47

Matthew Darnell

4,538
2
19
29

Not sure why I am getting all the downvotes. According to the jQuery documentation his margins wouldn't get applied (right before the example):http://api.jquery.com/css/#css1 – Matthew Darnell Apr 25 '12 at 15:38

Maverick · Answer 3 · 2012-04-25T16:21:54.867

-1

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.

edited Apr 25 '12 at 16:21

answered Apr 25 '12 at 14:54

Maverick

1,988
5
24
31

No, it doesn't work. Thanks anyways @Husar. I have figured out what I was doing wrong. Here is the working code :)

– John Carter Apr 25 '12 at 15:04

I have edited my answer. It definitely works now. This way your element will be horizontally centered regardless of screen size and element width. – Maverick Apr 25 '12 at 16:23

score -2 · Answer 4 · answered Apr 25 '12 at 14:44

-2

There are better ways to center a div using jQuery, such as setting it to absolute position and finding its width, the viewports width, and setting the offset based on those numbers:

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

answered Apr 25 '12 at 14:44

John Fable

1,081
7
11

5

`margin: 0 auto` will work without it's parent having text-align:center. The element in question just needs to have a declared width is all. – chipcullen Apr 25 '12 at 14:46
Yes, right, sorry I missed that. I still would use a jQuery solution though. – John Fable Apr 25 '12 at 14:48
Please explain why you'd use a jQuery solution in place of a simple CSS solution? – Sparky Apr 25 '12 at 15:20
It was my assumption that he needs to use jQuery, for whatever reason, since he didn't simply set the margin in CSS. Maybe I was over thinking it, but I got the impression that a javascript solution was a requirement. Maybe my previous comment should have said "I would still use this as a jQuery solution if that is a requirement" – John Fable Apr 25 '12 at 16:00

Jquery CSS How To Use Margin: 0 auto

4 Answers4