Центр DIV через jQuery

Question

У меня есть нижний колонтитул, который прикреплен к нижней части окна просмотра. Я использую JQuery переключатель, чтобы открыть комментарий карту для пользователей комментировать и представить:

$('a#footer-comment').click(function() { 
    $("#comment-card").toggle(300); 
    return false; 
    $('#comment-card').show({ position:); 
}); 

$('a#footer-comment-hide').click(function() { 
    $("#comment-card").toggle(300); 
    return false; 
    $('#comment-card').hide(); 
}); 

естественно, если я не добавить любые CSS селекторов # комментария-карту он показывает под сноской, и вне поля зрения.

Итак, я добавил: {position:absolute; bottom:30px; left:auto;} 30px, поэтому он появляется над нижним колонтитулом высотой 30px.

Проблема в том, что я не могу получить это, чтобы центрировать в области просмотра ... если я использую пиксели, в зависимости от разрешения, это слишком далеко слева или справа ... как мне центрировать это в окне просмотра?

Answer 1

Для центрирования абсолютно позиционированный элемента, который вы установите его CSS к этому:

left:50%; 
margin-left:-100px; 
position:absolute; 
bottom:30px; 

маржа налево должен быть 1/2 от ширины DIV вы центровая, так что если DIV является 200px широкого использования -100px для вашего поля слева. Когда маржа отрицательная, она тянет div в этом направлении. Так как он начинается с 50% по всему экрану, вам нужно только вытащить его на полпути, чтобы центрировать div на экране.