JQuery CSS Как использовать маржу: 0 auto

Я новичок в JQuery. Я хочу знать, как мы можем использовать margin: 0 auto; CSS-код в jquery-скриптах. Может ли кто-нибудь помочь мне? Вот код:JQuery CSS Как использовать маржу: 0 auto

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

На самом деле я хочу центрировать планку. Как я могу это сделать?

источник

2012-04-25 John Carter

Почему вы пытаетесь настроить панель с помощью jQuery? Если это вообще возможно, вы должны сохранить свои стили в CSS. – chipcullen

Вы хотите центрировать планку горизонтально или по вертикали? – Maverick

Я не могу центрировать планку. Можете ли вы опубликовать рабочий код с помощью CSS или создать панель с jquery? Буду признателен за вашу помощь. –

Вы устанавливаете все правильно. Но вы не можете отцентрировать элемент с margin: auto который имеет position: fixed:

Center a position:fixed element

Вы также мог бы сделать это с помощью JQuery:

Using jQuery to center a DIV on the screen

источник

2012-04-25 14:43:47 binarious

Спасибо, бинар. Да, мы не можем центрировать элемент с margin: auto, который имеет позицию: fixed :. Но добавление left: 0 и right: 0 к нему работает :) Еще раз спасибо. Вот изменения, которые я внес в файл CSS выше. [код] # fixed-bar { позиция: исправлена; margin-left: auto; margin-right: auto; прокладка: 0; background-color: black; z-index: 100; Слева: 0; right: 0; [code] –

-2

Есть более эффективные способы отцентрировать DIV с помощью JQuery, например, установить его в абсолютное положение и найти его ширину, ширину видовых экранов и установить смещение на основе этих чисел:

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

источник

2012-04-25 14:44:59

'margin: 0 auto' будет работать без его родителя, имеющего text-align: center. Для рассматриваемого элемента требуется только объявленная ширина. – chipcullen

Да, извините, я пропустил это. Тем не менее я все равно буду использовать решение jQuery. –

Пожалуйста, объясните, почему вы используете решение jQuery вместо простого решения CSS? – Sparky

Вы не можете использовать сокращенный CSS с jQuery, вам нужно будет установить каждый маркер отдельно.

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

источник

2012-04-25 14:47:02

Не знаете, почему я получаю все downvotes. Согласно документации jQuery, его поля не будут применяться (прямо перед примером): http: //api.jquery.com/css/#css1 –

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

Таким образом, ваш элемент будет находиться в горизонтальном положении независимо от размера экрана. Не забудьте включить jQuery в свой HTML.

источник

2012-04-25 14:54:51 Maverick

Нет, это не сработает. Спасибо в любом случае @ Хусар. Я выяснил, что я делаю неправильно. Вот рабочий код :)

Смежные вопросы

JQuery CSS Как использовать маржу: 0 auto

ответ

Смежные вопросы