किसी तत्व (jQuery)

Question

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

पूर्वावलोकन में चौड़ाई (120x120) तय की गई है, लेकिन अवधि में कुछ भी (छवि, टेक्स्ट) हो सकता है। मैं इसे लंबवत और क्षैतिजjQuery का उपयोग करके कैसे केंद्रित करूं? मैंने कुछ स्निपेट देखा लेकिन वे 'शरीर' के अंदर सभी केंद्र तत्वों को एक और तत्व नहीं। यदि संभव हो तो मैं इसके लिए 'प्लगइन' का उपयोग करना चाहता हूं।

बहुत धन्यवाद!

Answer 1

जब से तुम jQuery का उपयोग कर कोई आपत्ति नहीं है, तो आप Center Element Plugin

उपयोग कर सकते हैं यह कर के रूप में सरल है :

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

Answer 2

चूंकि आपने बताया है कि आप jquery का उपयोग कर रहे हैं, मुझे लगता है कि आप इसे जावास्क्रिप्ट के माध्यम से करना चाहते हैं। आप Jquery का उपयोग कर डीओएम में तत्वों में शैलियों को जोड़ सकते हैं। आप उपयोग कर सकते हैं

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

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

तत्व के आधार पर आप पाठ के अनुरूप उपयोग किए बिना यह केंद्र के लिए सक्षम हो सकता है: केंद्र यदि आप

margin: 0 auto 0 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 3

आप केवल एक सीएसएस का उपयोग कर सकते हैं lution (आईई अनदेखी)

<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> प्रदर्शन का उपयोग: ब्लॉक भी काम करेगा, लेकिन केवल क्षैतिज संरेखण के लिए, ऊर्ध्वाधर संरेखण के लिए या तो आप उपरोक्त कोड के अनुसार एक मेज अनुकरण करने के लिए या वैकल्पिक रूप से जावास्क्रिप्ट का उपयोग की आवश्यकता होगी।

Answer 4

नवीनतम jQuery यूआई की स्थिति घटक है:

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

डॉक्टर: http://jqueryui.com/demos/position/
प्राप्त करें: http://jqueryui.com/download

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(); 

Using jQuery to center a DIV on the screen

Answer 6

पर कोड से अवधारणा लिया आप सीएसएस का उपयोग कर इसे कर सकता है।
यह पोस्ट एक अच्छा समाधान प्रदान करता है - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
मूल रूप से:
1. बच्चे को पूर्ण स्थिति में सेट करें।
2।अभिभावक को स्थिति में सेट करें।
3. बच्चे के बाएं और ऊपर 50% सेट करें।
4. बाल तत्व की चौड़ाई से बाएं और ऊपर स्थानांतरित करने के लिए अनुवाद (-50%, - 50%)।