3

私はJqueryが初めてです。margin: 0 auto; の使い方を知りたいです。jquery スクリプトの 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>

実際には、バーを中央に配置したいと考えています。これどうやってするの？

4

4 に答える 4

2

あなたはすべてを正しく設定しています。margin: autoただし、次の要素を含む要素を中央に配置することはできませんposition: fixed:

位置を中央揃え:固定要素

jQuery を使用してこれを行うこともできます。

jQuery を使用して DIV を画面の中央に配置する

于 2012-04-25T14:43:47.740 に答える
1

jQuery で省略形の CSS を使用することはできません。各マージンを個別に設定する必要があります。

css({
    "marginTop": "0",
    "marginRight": "auto",
    "marginBottom": "0",
    "marginLeft": "auto"
})
于 2012-04-25T14:47:02.100 に答える
-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 を含めることを忘れないでください。

于 2012-04-25T14:54:51.423 に答える
-2

jQuery を使用して div を中央に配置するより良い方法があります。たとえば、div を絶対位置に設定し、その幅、ビューポートの幅を見つけ、それらの数値に基づいてオフセットを設定します。

$('.mydiv').css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
于 2012-04-25T14:44:59.823 に答える