Web: Выравнивание div по центру

В Интернете полно информации по выравниванию div’а по центру с помощью CSS, однако я не нашёл способов, которые бы всегда работали. Решил написать свой, получился плагин для jQuery.

Использование

$('#mydiv').center();

Параметры

parent - относительно чего будет выравниваться элемент(пример: 'body', '#middle').
position - присваиваемая позиция, по умолчанию absolute
options - тип выравнивания: 'all', 'height', 'width', по умолчанию - 'all'

Код

(function($){
	$.fn.center = function(parent, position, options) {
		return this.each(function () {
			var self = $(this);
			self.css('position', (position != null) ? position : 'absolute');
 
			if (parent == null)
			{
				width = self.parent().outerWidth();
				height = self.parent().outerHeight();
			}
			else
			{
				width = $(parent).outerWidth();
				height = $(parent).outerHeight();
			}
 
			if (self.parent().is('body') || parent == 'body') {
				width = $(window).outerWidth();
				height = $(window).outerHeight();
			}
 
			dwidth = self.outerWidth();
			dheight = self.outerHeight();
 
			if (options == 'width' || options == 'all' || options == null) {
				self.css('left', (width - dwidth) / 2);
			}
 
			if (options == 'height' || options == 'all' || options == null) {
				self.css('top', (height - dheight) / 2);
			}
		});
	};
})(jQuery);
  • Alexey

    1) Логично что деление можно вынести за скобку.
    2) Ещё нравится комбинация jQuery и `голого` JS, зачем:
    self.parent().css(‘width’) -> self.parent().outerWidth()
    self.parent().css(‘height’) -> self.parent().outerHeight()
    document.body.scrollWidth -> $(window).outerWidth()
    document.body.scrollHeight -> $(window).outerHeight()
    3) почему я использовал window, да потому что видимая область экрана может быть гораздо меньше чем размер документа, это можно явно оценить по длинным сайтам.
    4) Часто обращаешься к self.parent() вынеси его в переменную.
    5) все css(‘…’) замени на соответствующие методы, пример я привел ранее.

    self.parent().get(0).tagName == ‘BODY’ -> self.parent().is(‘body’)

    • Спасибо, всё поправил, многого просто не знал:). Только для «position» не нашёл аналога.
      Ну и собственно вопрос: Чем лучше использовать методы, вместо css()?

      • Alexey

        Для «position» и нет его.
        Методы быстрее, они напрямую возвращают конкретный размер.
        А css собирает все что есть в объекте «свойства» самого объекта и внутри ищет заданный атрибут.
        Да, если обратить внимание, методы возвращают значения integer ;)

        ЗЫ если интересно распарси jQuery и сравни даже просто по размеру обе функции.

        • Ок, спасибо за замечания;)

      • Alexey

        А вот в конце вместо offset как раз таки нужно указать css

        • Почему?

          • Alexey

            Это синтаксически правильно. Да и мало кто использует объект offset для указания положения.

  • геф

    Выравнивать div с помощью скриптов не очень удачная идея. Данная задача прекрасно решается чистым CSS
    .wrapper {
    margin: 0 auto.
    width: 940px
    }

    • геф

      забыл точки с запятыми в конце строк :)

    • Я же написал: «однако я не нашёл способов, которые бы всегда работали». Этот способ(чистым css) лучше, но он не всегда работает и он выравнивает только по горизонтали.

      • Nikel

        margin-top ?

        • не катит

          • Jester

            Бог с тобой, что же ты творишь?


            div.target { position:absolute; height:50px; margin-top:-25px; top:50%; }

            Элементарно, работает даже на нокии 24x24px

  • Pingback: uInfo v1.2 | Блог ZiGGi()

Перейти к верхней панели