Центрируйте элемент непосредственно в центре экрана. jQuery

-5

просто хотите центрировать синий ящик непосредственно в центре экрана, используя jquery.Центрируйте элемент непосредственно в центре экрана. jQuery

jsFiddle: http://jsfiddle.net/Pxjkk/

<html>

источник

2013-03-01 Josue Espinosa

Что вы пробовали? Этот JSFiddle относится к вашему предыдущему вопросу ... Кажется, вы заставляете нас строить свой проект по частям. – ahren

Похоже, вы получили сообщение «пост-код в вопросе, а не просто ссылку на сообщение JSfiddle», в этом случае вам следует отправить код, связанный с вопросом, вместо случайного тега. –

, пожалуйста, попробуйте прежде чем вы спросите !!! http://bit.ly/XdUUjs –

Для центрирования синего ящика, это положение должно быть установлено в position:absolute;

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

Вот краткий пример:

$('#color') 
    .css('top','50%') 
    .css('left','50%') 
    .css('margin-left','-'+($('#color').outerWidth()/2)+'px') 
    .css('margin-top','-'+($('#color').outerHeight()/2)+'px');

Убедитесь, что он остается центром на браузер изменения размера:

$(document).bind('resize', function(){ 
     $('#color') 
     .css('top','50%') 
     .css('left','50%') 
     .css('margin-left','-'+($('#color').outerWidth()/2)+'px') 
     .css('margin-top','-'+($('#color').outerHeight()/2)+'px'); 
    });

Это, вероятно, будет хорошей идеей, чтобы обернуть код центрирующую в функции и вызова при каждом изменении размера синего квадрата.

Вот отредактированный jsFiddle:

http://jsfiddle.net/mdkpS/

источник

2013-03-01 00:42:53 AlexCheuk

Основы центровки элементов в CSS:

Сделать контейнер для элемента и поместить его на body уровне (в центре в центре экрана)
Комплект position: relative на контейнере
position: absolute на элементе
Добавить фиксированный width и height к элементу
Установите top: 50% и left: 50% на элементе
Установите margin-left и margin-top к отрицательной половине width и height соответственно

Та же логика применима и для jQuery, только вы можете динамически вычислять размеры и поля.

источник

2013-03-01 00:35:45 elclanrs

Я знаю css. Я считаю, что этот вопрос задает использование jQuery. –

Такая же логика применяется к jQuery. – elclanrs

Центрируйте элемент непосредственно в центре экрана. jQuery

ответ

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