Использование jQuery для центрирования DIV на экране
Это больше вопрос CSS, чем вопрос jQuery. Вы можете использовать методы jQuery, чтобы помочь вам найти кросс-браузерное позиционирование и применить надлежащие стили CSS к элементу, но суть вопроса в том, как центрировать div на экране с помощью CSS.
Если вы центрируете div на экране, возможно, вы используете FIXED позиционирование. Почему бы просто не сделать это: stackoverflow.com/questions/2005954/… . Решение чисто CSS, не требует JavaScript.
27 ответов
Мне нравится добавлять функции в jQuery, чтобы эта функция помогла:
Теперь мы можем просто написать:
Демо: Fiddle (с добавленным параметром)
Одно изменение, которое я бы предложил: вы должны использовать this.outerHeight () и this.outerWidth () вместо просто this.height () и this.width (). В противном случае, если у объекта есть граница или отступ, он окажется немного смещенным от центра.
Я обнаружил, что это прекрасно работает, за исключением режима совместимости IE7 / IE8, где мой элемент был перемещен вправо. Приведенное ниже решение molokoloco работает для меня кросс-браузерно.
Этот плагин / функция работает потрясающе. Мне интересно, однако, возможно ли также добавить параметры выравнивания углов, такие как .bottomRight () или .leftTop () или что-то подобное?
Что если я не хочу центрироваться в
Одна проблема с этим состоит в том, что если элемент выше или шире, чем окно, то в итоге он будет располагаться с отрицательным верхним или левым расположением, что означает, что пользователь не сможет прокрутить и увидеть все это. Вы должны установить top и left в 0, если они в конечном итоге будут отрицательными.
Я считаю, что вы должны вычесть половину высоты деления, которое вы хотите — (this.outerHeight() / 2) , т.е. добавить это в «верхний» код: — (this.outerHeight() / 2)
Код в ответе должен использовать «position: fixed», поскольку «absolute» вычисляется по первому относительному родительскому элементу, а код использует окно для вычисления центра.
Я бы также предложил добавить поддержку, чтобы при изменении размера окна он корректировал элемент на странице. В настоящее время он остается с оригинальными размерами.
Это большой кусок кода, который я сейчас использую, чтобы помочь с моими пользовательскими исправлениями в функциональности диалога jQuery UI (автоматическая высота + максимальная высота = jQuery UI Dialog не нравится). Я немного изменил код, так что если центрируемый элемент не помещается во все окно, верхний и левый устанавливаются на максимальные значения, необходимые для обеспечения того, чтобы верх и левый элемент всегда были видны. Это прекрасно работает для таких вещей, как диалоговые окна, поэтому пользователь всегда может получить доступ к строке заголовка диалогового окна, чтобы переместить и закрыть его. Форк его кода находится здесь: jsfiddle.net/m6D72
Вместо this.outerHeight () должно быть $ (this) .outerHeight () sameas $ (this) .outerWidth (). В противном случае вы, вероятно, получите ошибку «externalHeight is not function». ( stackoverflow.com/questions/947692/… )
Чтобы использовать фиксированное позиционирование вместо абсолютного, просто удалите + $(window).scrollTop() и + $(window).scrollLeft() . (И, конечно же, измените «absolute» на «fixed» ).
спасибо, приятель, я объявляю свой пользовательский код для центрирования любого элемента, но сейчас, когда я читаю твою функцию, это действительно очень приятно, легко . Мне это очень нравится, я буду использовать это сейчас ^ _ ^ . приятно ..
Это фантастика, однако . как бы я сделал это переключение? . чтобы я мог вернуть центрирование по другому сценарию? aka .. $ (element) .nocenter ();
(function($) < $.fn.extend(< center: function () < return this.each(function() < var top = ($(window).height() - $(this).outerHeight()) / 2; var left = ($(window).width() - $(this).outerWidth()) / 2; $(this).css(0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'>); >); > >); >)(jQuery); (function($)< $.fn.extend(< center: function (options) < var options = $.extend(< // Default values inside:window, // element, center into window transition: 0, // millisecond, transition time minX:0, // pixel, minimum left element value minY:0, // pixel, minimum top element value withScrolling:true, // booleen, take care of the scrollbar (scrollTop) vertical:true, // booleen, center vertical horizontal:true // booleen, center horizontal >, options); return this.each(function() < var props = ; if (options.vertical) < var top = ($(options.inside).height() - $(this).outerHeight()) / 2; if (options.withScrolling) top += $(options.inside).scrollTop() || 0; top = (top >options.minY ? top : options.minY); $.extend(props, ); > if (options.horizontal) < var left = ($(options.inside).width() - $(this).outerWidth()) / 2; if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; left = (left >options.minX ? left : options.minX); $.extend(props, ); > if (options.transition > 0) $(this).animate(props, options.transition); else $(this).css(props); return $(this); >); > >); >)(jQuery); ОБНОВЛЕНИЕ:
Ваша функция отлично работала для вертикального центра. Это не похоже на работу для горизонтального центра.
CSS предполагает, что вы знаете размер (по крайней мере, в процентах) центрированного div, тогда как jQuery работает как угодно.
который дает вам гораздо больше возможностей, чем только центрирование.
@Michelangelo: вам нужна библиотека jqueryUI, чтобы использовать .position () как функцию. Проверьте: api.jqueryui.com/position/
Вот иди сюда. Я закончил тем, что использовал его для клонирования Lightbox. Основным преимуществом этого решения является то, что элемент будет автоматически центрироваться, даже если изменение размера окна делает его идеальным для такого рода использования.
$.fn.center = function() < this.css(< 'position': 'fixed', 'left': '50%', 'top': '50%' >); this.css(< 'margin-left': -this.outerWidth() / 2 + 'px', 'margin-top': -this.outerHeight() / 2 + 'px' >); return this; > Я думаю, что это работает хорошо . это пошло не так в моем случае из-за использования адаптивного дизайна: ширина моего div изменяется при изменении ширины экрана. Что отлично работает, так это ответ Тони $(window).resize(function()); а затем добавление этого: $(window).resize(function()); (mydiv — модальное диалоговое окно, поэтому, когда оно закрыто, я удаляю обработчик события resize.)
Иногда вам может потребоваться использовать outerWidth() и outerHeight() чтобы учесть отступы и ширину границы.
Это прекрасно работает для $(window).height() проекта с doc type 5, где $(window).height() дает 0. Но я изменил положение на ‘absolute’.
Вы можете использовать только CSS для центрирования так:
calc() позволяет выполнять базовые вычисления в css.
Имейте в виду, что calc () не поддерживается в IE8, если вам требуется поддержка этого браузера, используйте стратегию jquery center.
Я расширяю большой ответ, данный @TonyL. Я добавляю Math.abs() для переноса значений, а также учитываю, что jQuery может находиться в режиме «без конфликтов», например, в WordPress.
Я рекомендую вам обернуть верхнее и левое значения с помощью Math.abs(), как я сделал ниже. Если окно слишком маленькое, а в вашем модальном диалоговом окне есть верхний флажок, это предотвратит проблему отсутствия окна закрытия. Функция Тони имела бы потенциально отрицательные значения. Хорошим примером того, как вы заканчиваете отрицательные значения, является наличие большого централизованного диалога, но конечный пользователь установил несколько панелей инструментов и/или увеличил шрифт по умолчанию — в этом случае окно закрытия в модальном диалоговом окне (если наверху) может быть не видимым и доступным для просмотра.
Другая вещь, которую я делаю, это немного ускорить это путем кэширования объекта $(window), чтобы уменьшить дополнительные обходы DOM, и я использую кластер CSS.
jQuery.fn.center = function ($) < var w = $(window); this.css(< 'position':'absolute', 'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()), 'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft()) >); return this; > Чтобы использовать, вы бы сделали что-то вроде:
jQuery(document).ready(function($)< $('#myelem').center(); >); Мне нравятся ваши улучшения; Тем не менее, есть еще одна проблема, которую я обнаружил в зависимости от того, какое поведение вы ищете. Абс будет отлично работать только в том случае, если пользователь полностью прокрутил вверх и влево, в противном случае пользователю придется прокручивать окно браузера, чтобы попасть в строку заголовка. Чтобы решить эту проблему, я решил сделать простой оператор if, такой как это: if (top < w.scrollTop()) top = w.scrollTop(); вместе с эквивалентом для левого. Опять же, это обеспечивает другое поведение, которое может быть или не быть желательным.
Я бы использовал функцию jQuery UI position .
test div to center in window Если у меня есть div с id «test», чтобы центрировать, то следующий script центрирует div в окне на готовом документе. (значения по умолчанию для «my» и «at» в опциях позиции «center» )
Я хотел бы исправить одну проблему.
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); Выше код не будет работать в случаях, когда this.height (позволяет предположить, что пользователь изменяет размер экрана, а контент динамический) и scrollTop() = 0 , например:
window.height — 600
this.height 650
Теперь окно центрировано -25 вне экрана.
How to Center a on the Screen Using jQuery
The code snippet below shows the way to create a function that you can add to your scripts to center the element:
html> html> head> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> style> div.box < width: 400px; height: 300px; border: 2px solid green; position: relative; top: 10px; left: 10px; > div.myclass < width: 50px; height: 50px; color: white; background: green; border-radius: 4px; text-align: center; display: flex; align-items: center; justify-content: center; > style> head> body> div class="box"> div class="myclass">Box div> div> script> $(document).ready(function( ) < jQuery.fn.center = function(parent) < if(parent) < parent = this.parent(); > else < parent = window; > this.css(< "position": "absolute", "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"), "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px") >); return this; > $("div.myclass:nth-child(1)").center(true); >); script> body> html>To use the above function, you should choose the element to center and pass it through your new function:
You should use this.outerHeight() and this.outerWidth(); otherwise, if the object has a padding or border, it will end up off-center.
The jQuery solution can be a perfect solution to center the element if CSS isn’t working.
The .outerHeight() and .outerWidth() Methods
The .outerHeight() and .outerWidth() methods get the height and width (including padding, border, and margin) for the first element in the group of matched elements or sets the outer height and width of every matched element respectively. If two method is called on an empty group of elements, they will return undefined.
Related Resources
- How to Remove Style Added with the .css() function Using jQuery
- How to Get the ID of the Element that Fired an Event in jQuery
- How to Add Options to a Select Element using jQuery
- How to Change an Element’s Class with JavaScript
- How to Check if Element is Visible after Scrolling
- How to Get Query String Values in JavaScript
- How to Get the Children of the $(this) Selector
- How to Reload a Page using JavaScript
- How to Add a Class to a Given Element
- How to Get the data-id Attribute
- How the Keyword “this” Works
- How to Hide and Show a
- JavaScript Data Types
- CSS padding Property
- CSS border Property
- CSS height Property
- CSS width Property
- HTML Tag
Сделать блок/элемент по центру в HTML
В этом записи я поделюсь вариантом того, как можно сделать блок по центру с помощью jQuery или CSS.
Я покажу вам как это сделать с помощью jQuery и CSS.
jQuery
Чтобы было удобно пользоваться центрированием с помощью jQuery, нужно написать небольшой плагин, который представлен ниже.
Вы можете его сохранить в отдельный .js файл и подключить в или просто указать код между .
jQuery.fn.center = function(parent) < if (parent) < parent = this.parent(); >else < parent = window; >this.css(< "position": "absolute", "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"), "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px") >); return this; >
Если вы хотите центрировать блок по родительскому элементу, то вам нужно указывать true (как аргумент метода .center() ), если нет — false . Пример того как использовать данный снипет показан ниже:
На место $(‘ваш элемент’) вписывается элемент, который вы хотите расположить по центру.
jQuery демо
Первый квадрат «1 родитель» ( .center(true) ) находится внутри родительского элемента .container-demo-jquery , тем самым он по центру родительского элемента. Второй квадрат «2 окно браузера» ( .center(false) ) центрируется по экрану пользователя (то есть вне зависимости от родительских элемента).
Кроссбраузерность
jQuery гарантирует 100% кроссбраузерность. Тем самым, элемент, для которого стоит центрирование будет корректно отображаться на всех устройствах.
Блок так же можно выравнивать с помощью CSS. Ниже показан пример того как это можно сделать:
После чего можно указать класс .center для какого-нибудь элемента. Как показано на примере ниже.
Кроссбраузерность
CSS версия центрирования является кроссбраузерной на всех версиях современных браузеров. IE8 и ниже не поддерживаются в данном случается придется пользоваться альтернативным способом, например jQuery.
Демо
Первый квадрат имеет .center класс, второй — нет.