Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2012, 15:35
Аспирант
Отправить личное сообщение для VitAl2013 Посмотреть профиль Найти все сообщения от VitAl2013
 
Регистрация: 27.05.2011
Сообщений: 67

Один объект внутри другого по центру вертикально и горизонтально
Имеем:
<div id="parent"></div>
<div id="child"></div>

Задача расположить любой элемент внутри любого другого по середине вертикально и горизонтально. Элементы могут размещаться по странице хоть где - не обязательно по середине.
Решение у меня получилось такое:
function center (parent, child){
        $(parent).append($(child).remove());
	$(child).css({
		position:'relative',
		left: ($(parent).width() - $(child).outerWidth())/2,
		top: ($(parent).height() - $(child).outerHeight())/2
		});
};

Это мы создали функцию которая вырывает child и вставляет его в parent. Затем делает child координаты зависимыми от рабочей области parent.
Затем где удобно в коде вставляем:
$(function() { center('#parent','#child'); });
$(window).resize(function() { center('#parent','#child'); });

Это запускает саму функцию и приклеивает её ресайзу окна.
Дополнительные плюсы такого метода - если есть не один child и их надо расположить как-то вокруг первого элемента, то функцию легко допилить - изменив формулы размещения в зависимости от ещё одного или нескольких параметров.
Например, если надо накидать элементы слева и права от центрального c отступом gap:
function center (parent, child, position, gap){
        $(parent).append($(child).remove());
	$(child).css({
		position:'relative',
		left: (($(parent).width() - $(child).outerWidth())/2)-($(child).outerWidth()+gap)*position,
		top: (($(parent).height() - $(child).outerHeight())/2)
		});
};


Просьба покритиковать и обмозговать, как ещё можно лучше сделать.

Последний раз редактировалось VitAl2013, 27.05.2012 в 15:50.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
один setInterval внутри другого setInterval-а dadli Общие вопросы Javascript 5 20.03.2012 18:16
какая функция, определяет как расположенно фото, горизонтально или вертикально? FirstFrost Общие вопросы Javascript 6 15.07.2010 15:19
Перемещение div внутри другого Danila74 jQuery 1 24.09.2009 17:31
Спойлер работает только на один объект на странице. Shanks Общие вопросы Javascript 4 10.05.2009 14:53