1. घर
  2. सवाल और जवाब
  3. सीएसएस

सीएसएस

2010-05-29 50 views
25

का उपयोग कर क्रॉस ब्राउज़र div center संरेखण div को संरेखित करने का सबसे आसान तरीका क्या है जिसका स्थान relative क्षैतिज और लंबवत सीएसएस का उपयोग कर रहा है? div की चौड़ाई और ऊंचाई अज्ञात है, यानी यह प्रत्येक div आयाम और सभी प्रमुख ब्राउज़रों में काम करना चाहिए। मेरा मतलब केंद्र संरेखण है।सीएसएस

margin-left: auto; 
margin-right: auto;

जैसे मैं here किया:

मैं क्षैतिज संरेखण का उपयोग कर बनाने के लिए सोचा।

क्या यह क्षैतिज संरेखण के लिए एक अच्छा क्रॉस ब्राउज़र समाधान है?

मैं लंबवत संरेखण कैसे कर सकता हूं?

स्रोत

2010-05-29 Misha Moroshko

+0

जब आप संरेखण कहते हैं, तो यह स्पष्ट नहीं है कि आप div को संरेखित करना चाहते हैं। क्या आपका मतलब केंद्र div है? –

+0

क्या आप केंद्र – Starx

+0

पर लंबवत रूप से div को संरेखित करना चाहते हैं क्षमा करें, हाँ मेरा मतलब केंद्र संरेखण है। –

उत्तर

32

क्षैतिज केंद्र केवल तभी संभव है जब तत्व का width ज्ञात हो, अन्यथा ब्राउज़र यह नहीं समझ सकता कि कहां से शुरू करना और समाप्त करना है।

#content { 
    width: 300px; 
    margin: 0 auto; 
}

यह पूरी तरह से crossbrowser संगत है।

वर्टिकल सेंटरिंग केवल तभी संभव है जब तत्व बिल्कुल स्थित है और height ज्ञात है। हालांकि पूर्ण स्थिति margin: 0 auto; तोड़ देगी, इसलिए आपको इसे अलग-अलग संपर्क करने की आवश्यकता है। आप क्रमशः अपने width और height की नकारात्मक आधा करने के लिए अपने top और left50% करने और margin-top और margin-left सेट करना होगा।

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2935404</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

जिसके अनुसार, खड़ी केंद्रित आमतौर पर शायद ही कभी असली दुनिया में लागू किया जाता है:

यहाँ एक copy'n'paste'n'runnable उदाहरण है।

चौड़ाई और ऊंचाई पहले से वास्तव में अज्ञात हैं, तो आप जावास्क्रिप्ट/jQuery हड़पने के लिए margin-left और margin-top मूल्यों को निर्धारित और तथ्य यह है साथ रहने के लिए है कि ग्राहक div जल्दी से पेज लोड, के दौरान स्थानांतरित किया जा देखेंगे की आवश्यकता होगी जो एक "wtf?" हो सकता है अनुभव।

स्रोत

2010-05-29 14:47:26 BalusC

+1

ध्यान दें कि आपको IE के लिए मानक मोड में चलाना है (क्विर्क मोड में, आप ' क्षैतिज रूप से एक div को केंद्रित करने के लिए मूल तत्व पर 'टेक्स्ट-एलाइन: केंद्र' का उपयोग करना होगा)। –

+2

क्विर्क मोड कभी भी आधुनिक वेब पृष्ठों के लिए एक विकल्प नहीं है, इसलिए यह विचार करने योग्य नहीं है। – Rob

+0

@ रोब: हालांकि मुझे इसके बारे में लौ युद्ध शुरू करने से नफरत है (कोई भी क्विर्क मोड से मरता नहीं है), मुझे एक बार [वेब-बॉक्स बॉक्स मॉडल] का उपयोग करने के लिए वेब ऐप में क्विर्क मोड का उपयोग करना पड़ा (http: // www IE में .quirksmode.org/css/box.html)। –

7

"वर्टिकल सेंटरिंग केवल तभी संभव है जब तत्व पूरी तरह से स्थित हो और ज्ञात ऊंचाई हो।" - यह कथन बिल्कुल सही नहीं है।

आप display:inline-block; को आजमा सकते हैं और इसका उपयोग अपने माता-पिता के बॉक्स में लंबवत रूप से संरेखित होने की संभावना है। यह तकनीक आपको इसकी ऊंचाई और चौड़ाई को जानने के बिना तत्व को संरेखित करने की अनुमति देती है, हालांकि कम से कम आपको माता-पिता की ऊंचाई जानने की आवश्यकता होती है।

यदि आपका HTML यह है;

<div id="container"> 
    <div id="aligned-middle" class="inline-block">Middleman</div> 
    <div class="strut inline-block">&nbsp;</div> 
</div>

और अपने सीएसएस है:

#container { 
    /* essential for alignment */ 
    height:300px; 
    line-height:300px; 
    text-align:center; 
    /* decoration */ 
    background:#eee; 
} 
    #aligned-middle { 
     /* essential for alignment */ 
     vertical-align:middle; 
     /* decoration */ 
     background:#ccc; 
     /* perhaps, reapply inherited values, so your content is styled properly */ 
     line-height:1.5; 
     text-align:left; 
    } 
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */ 
    #container .strut { 
     /* parent's height */ 
     height:300px; 
    } 
.inline-block { 
    display:inline-block; 
    *display:inline;/* for IE < 8 */ 
    *zoom:1;/* for IE < 8 */ 
}

फिर # गठबंधन मध्यम #container भीतर केंद्रित किया जाएगा। यह इस तकनीक का सबसे सरल उपयोग है, लेकिन यह परिचित होने के लिए एक अच्छा है।

आईई < 8 */"के लिए"/* के साथ चिह्नित नियमों को सशर्त टिप्पणियों के उपयोग के माध्यम से एक अलग स्टाइलशीट में रखा जाना चाहिए।

आप यहाँ इस बात का एक काम उदाहरण देख सकते हैं: http://jsfiddle.net/UXKcA/3/

संपादित करें: (इस विशेष टुकड़ा IE6 और ff3.6 में परीक्षण किया गया है, लेकिन मैं यह एक बहुत का उपयोग करें, यह बहुत पार ब्राउज़र है कि अगर आप की आवश्यकता होगी। एफएफ < 3 के लिए समर्थन, आप भी .inline-block नियम भीतर display:inline-block; तहत display:-moz-inline-stack; जोड़ने के लिए की आवश्यकता होगी।)

स्रोत

2010-05-29 17:19:26

0

"चौड़ाई और ऊंचाई पहले से वास्तव में अज्ञात हैं, तो आप जावास्क्रिप्ट/jQuery हड़पने के लिए तैयार करना होगा, मार्जिन-बाएं और मार्जिन-टॉप मूल्य और इस तथ्य के साथ रहते हैं कि ग्राहक जल्दी से पृष्ठ लोड के दौरान स्थानांतरित हो जाएगा, जो "wtf?" अनुभव का कारण बन सकता है। "

आप div .hide() सकता DOM के तैयार होने, लोड करने के लिए पेज के लिए प्रतीक्षा, div margin-left और margin-top मूल्यों div फिर से सेट, और .show()।

$(function(){ 
    $("#content").hide(); 
)}; 
$(window).bind("load", function() { 
    $("#content").getDimSetMargins(); 
    $("#content").show(); 
});

स्रोत

2011-09-26 23:53:55 nickarmstronggr

+3

खराब अभ्यास, लेकिन यदि पहले से ही, इसे सीएसएस में छुपाएं, और जब इसे लोड किया जाए तो केवल इसे दिखाएं। – Dementic

2

चेक इस Demo jsFiddle

सेट दो बातें

  1. एचटीएमएल संरेखित विशेषता मान केंद्र निम्नलिखित

  2. सीएसएस मार्जिन छोड़ दिया और मार्जिन-सही गुण मान सेट ऑटो

सीएसएस

<style type="text/css"> 
    #setcenter{ 
      margin-left: auto; 
      margin-right: auto;  
      // margin: 0px auto; shorthand property 
    } 
</style>

एचटीएमएल

<div align="center" id="setcenter"> 
    This is some text! 
</div>

स्रोत

2014-03-03 12:40:50

संबंधित मुद्दे

 संबंधित मुद्दे