Показать сообщение отдельно
  #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.
Ответить с цитированием