Jquery CSS如何使用Margin: 0 auto

Question

Jquery CSS如何使用Margin: 0 auto

3

我是JQuery的新手。我想知道如何在jQuery脚本中使用margin：0 auto; CSS代码。有人能帮帮我吗？这是代码：

<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>

实际上，我想将该栏居中。我应该怎么做？

- John Carter

5

为什么你要用 jQuery 来设计样式栏？如果可能的话，应该将样式保留在 CSS 中。 - chipcullen

你想水平或垂直居中该栏呢？ - Maverick

我无法使导航条居中。你能否发一下代码，用CSS或jquery来设置导航条的样式？非常感谢您的帮助。 - John Carter

2

现在是时候评估一下仅使用CSS设置样式与使用jQuery / JavaScript覆盖CSS样式之间的差异了。 - Sparky

4个回答

1

你不能在jQuery中使用简写CSS，你必须分别设置每个边距。

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

- Matthew Darnell

不确定为什么我得到了所有的踩。根据jQuery文档，在示例之前他的边距不会被应用：http://api.jquery.com/css/#css1 - Matthew Darnell

-1

你可以尝试这个：

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

使用这种方式，您的元素将在不考虑屏幕大小的情况下水平居中。别忘了在HTML中包含jQuery。

- Maverick

不，它不起作用。无论如何感谢@Husar。我已经找出我做错了什么。这是工作代码 :) <pre> <style> #fixed-bar { position:fixed; margin-left: auto; margin-right: auto; padding: 0; background-color: black; z-index: 100; left:0; right:0; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <script> $(function () { $("#fixed-bar") .css({
"width": "960px", "bottom": "0px",
}) .hide(); . . . . . </pre> - John Carter

我已经编辑了我的回答。现在它绝对有效。这样，您的元素将在任何屏幕大小和元素宽度下都水平居中。 - Maverick

-2

使用jQuery有更好的方法来居中一个div，比如将其设置为绝对定位，并找到它的宽度、视口的宽度，并根据这些数字设置偏移量：

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

- John Fable

5

margin: 0 auto 可以独立使用，不需要父元素具有 text-align:center 属性。只需要该元素有一个已声明的宽度即可。 - chipcullen

是的，没错，抱歉我忽略了那个。不过我还是会使用 jQuery 解决方案。 - John Fable

请解释一下为什么您会使用jQuery解决方案来代替简单的CSS解决方案？ - Sparky

我认为他需要使用jQuery，出于某种原因，因为他没有在CSS中简单地设置边距。也许我想太多了，但我有这样的印象，即JavaScript解决方案是必需的。也许我的先前评论应该说：“如果需要，我仍然会将其用作jQuery解决方案。” - John Fable

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- binarious · Accepted Answer

您正在设置一切正确。但是，如果使用position: fixed，则无法使用margin: auto居中元素：

如何居中一个position:fixed元素

您也可以使用jQuery来实现此目的：

使用jQuery将DIV居中在屏幕上