عنصر توسيط داخل عنصر (jQuery)

Question

<div class="preview">
  <span class="center">This will be centered</div>
</div>

تحتوي المعاينة على عرض ثابت (120 × 120) ، ولكن قد تحتوي على أي شيء (صورة ، نص). كيف يمكنني تركيزه عموديا و أفقيا استخدام jQuery؟ بحثت عن بعض المقتطفات لكنهم جميعهم يركزون على العناصر داخل "الجسم" وليس عنصرًا آخر. أرغب في تجنب استخدام "البرنامج المساعد" لهذا الغرض إذا كان ذلك ممكنًا.

شكرا جزيلا!

Answer 1

بما أنك لا تمانع في استخدام jQuery ، يمكنك استخدام مركزية عنصر البرنامج المساعد

الأمر بسيط مثل فعله:

$(".preview").center();

Answer 2

أحدث واجهة مستخدم JQuery لديها مكون من الموضع:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

المستند: http://jqueryui.com/demos/position/
يحصل: http://jqueryui.com/download

Answer 3

منذ أن ذكرت أنك تستخدم jQuery ، أفترض أنك ترغب في القيام بذلك عبر JavaScript. يمكنك إضافة أنماط إلى عناصر في DOM باستخدام jQuery. يمكنك استخدام

http://docs.jquery.com/css/css#properties

  $(.center).css({'display' : 'block', 'text-align' : 'center'});

اعتمادًا على العنصر ، قد تكون قادرًا على مركزه دون الحاجة إلى استخدام محاذاة النص: مركز إذا قمت بتعيين الهامش على

margin: 0 auto 0 auto

سيؤدي ذلك إلى تعيين الهامش في الأعلى والسفلي إلى الصفر ، و Auto على اليسار واليمين ، ويمكن استخدام هذا لتركز عنصر الكتلة داخل عنصر كتلة آخر.

لتوسيط عنصر رأسيًا في jQuery ، يمكنك استخدام هذا

http://cool-javascripts.com/jquery/vertical-alignment-of-contents-inside-an-element-using-jquery.html

    function ($) {
    $.fn.vAlign = function(container) {
        return this.each(function(i){
    if(container == null) {
       container = 'div';
    }
    var paddingPx = 10; //change this value as you need (It is the extra height for the parent element)
    $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
    var el = $(this).children(container + ":first");
    var elh = $(el).height(); //new element height
    var ph = $(this).height(); //parent height
    if(elh > ph) { //if new element height is larger apply this to parent
        $(this).height(elh + paddingPx);
        ph = elh + paddingPx;
    }
    var nh = (ph - elh) / 2; //new margin to apply
    $(el).css('margin-top', nh);
        });
     };
})(jQuery);

Answer 4

يمكنك استخدام حل CSS فقط (تجاهل IE)

<div class="preview" style="display:table-cell;vertical-align:middle;text-align:center;margin:0 auto"> <span class="center">This will be centered</div> </div> باستخدام العرض: ستعمل Block أيضًا ولكن فقط من أجل المحاذاة الأفقية ، من أجل المحاذاة الرأسية إما ستحتاج إلى محاكاة جدول وفقًا للرمز أعلاه أو استخدام JavaScript بدلاً من ذلك.

Answer 5

يمكنك إضافة وظيفتك الخاصة إلى jQuery:

// Centers on div
jQuery.fn.center = function (div) {
this.css("position", "absolute");

var position = div.position();
this.css("top", Math.max(0, ((div.height() - this.outerHeight()) / 2) + position.top) + "px");

this.css("left", Math.max(0, ((div.width() - this.outerWidth()) / 2) + position.left) + "px");
return this;
};

يستخدم:

$('#ajxload').center($('#mapWrapper')).show();

أخذ المفهوم من الكود في باستخدام jQuery لتوسيط Div على الشاشة

Answer 6

يمكنك القيام بذلك باستخدام CSS.
يوفر هذا المنشور حلاً جيدًا - http://mindthesemicolon.com/how-to-to-an-an-element-vally-and-horizontally-using-css/
في الأساس:
1. اضبط الطفل على وضع المطلق.
2. اضبط الوالد على الموقف النسبي.
3. تعيين الطفل اليسار واليسرى إلى 50 ٪.
4. ترجمة (-50 ٪ ،-50 ٪) لتغيير اليسار والأعلى بمقدار نصف عرض عنصر الطفل.