html - सीएसएस पूर्ण केंद्रित



css css3 (3)

आइए इसे थोड़ा तोड़ दें:

यदि आपके पास निम्न सीएसएस है (मैं इसे आपके वर्तमान मार्कअप पर लागू करता हूं):

.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

आप देख सकते हैं कि div.absolute-center पूरे गुण तत्व (इस मामले में body ) को भरता है, बस सभी गुणों को top , bottom , right और left

डेमो: http://jsfiddle.net/0osLv27k/

इसलिए जब हम पिछले सीएसएस में width (अतिरिक्त height ) जोड़ते हैं, तो तत्व इस आकार तक सीमित है।

डेमो: http://jsfiddle.net/0osLv27k/1/

और अंत में जादुई margin: auto जो तत्व को केंद्रित करने के लिए बनाता है।

डेमो: http://jsfiddle.net/0osLv27k/2/

https://src-bin.com

हाल ही में मैं केंद्र में क्षैतिज और लंबवत दोनों तत्वों को एक तत्व की स्थिति में रखने के लिए उपयोग की गई इस विधि में आया हूं। हालांकि, मैं यह समझने में सक्षम नहीं था कि प्रत्येक संपत्ति क्या कर रही है। क्या कोई मुझे समझा सकता है कि top:0, bottom:0, left:0, right:0 पर सेट करने का क्या प्रभाव है top:0, bottom:0, left:0, right:0 ?

(यदि आप आम आदमी के शब्द का उपयोग करके इसे समझा सकते हैं या एक चित्रकारी छवि प्रदान कर सकते हैं तो बहुत अच्छा होगा।)

साथ ही, तालिका में डिस्प्ले सेट करने का क्या उपयोग है?

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}
<p class="absolute-center">What is this sorcery?</p>


Answer #1

आप इसे सीएसएस को कम कर सकते हैं:

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}
<p class="absolute-center">What is this sorcery?</p>

bottom: 0; top: 0; left: 0; right: 0; तत्वों के साथ absolute तत्व bottom: 0; top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; सभी जगह भर जाएगी।

तो, यहां गुप्त / जादूगर क्या है?

आप तत्व की चौड़ाई और ऊंचाई को परिभाषित कर रहे हैं। तो, भले ही वह सभी जगह भरना चाहता है, वह आपकी चौड़ाई और ऊंचाई से सीमित होगा।

रहस्य margin: auto , क्यों? क्योंकि तत्व मार्जिन के साथ रहने की दूरी को भर देगा। इस तरह से क्योंकि आपके पास चौड़ाई और ऊंचाई परिभाषित है, इसमें आकार होगा लेकिन मार्जिन शेष कंटेनर / माता-पिता को auto वर्क के रूप में भर देगा, दोनों तरफ बराबर आकार में होगा।

margin:auto आपको चौड़ाई और ऊंचाई परिभाषित करने की आवश्यकता है।


Answer #2

इसे जांचें ... एचटीएमएल है

<p class="absolute-center"></p>

सीएसएस है

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}




css-position