मूल कंटेनर की ऊंचाई के प्रतिशत के रूप में मार्जिन या पैडिंग कैसे सेट करें?

Question

मैं निम्नलिखित का उपयोग करके सीएसएस में एक ऊर्ध्वाधर संरेखण बनाने पर अपने दिमाग को रैक कर रहा था

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

जबकि यह इस मामले के लिए काम कर रहा था, मुझे आश्चर्य हुआ कि जब मैंने अपने बेस डिव की चौड़ाई को बढ़ाया या घटाया, तो ऊर्ध्वाधर संरेखण स्नैप हो जाएगा। मैं उम्मीद कर रहा था कि जब मैं पैडिंग-टॉप प्रॉपर्टी सेट करूंगा, तो यह पैडिंग को पेरेंट कंटेनर की ऊंचाई के प्रतिशत के रूप में लेगा, जो हमारे मामले में आधार है, लेकिन 50 प्रतिशत के उपरोक्त मूल्य की गणना प्रतिशत के रूप में की जाती है चौड़ाई। :(

क्या जावास्क्रिप्ट का उपयोग करने के बिना, पैडिंग और / या मार्जिन को ऊंचाई के प्रतिशत के रूप में सेट करने का एक तरीका है?

Answer 1

यह तय है कि हाँ, ऊर्ध्वाधर पैडिंग और मार्जिन चौड़ाई के सापेक्ष हैं, लेकिन topऔर bottom नहीं।

तो बस एक div को दूसरे के अंदर रखें, और आंतरिक div में, जैसे कुछ का उपयोग करें top:50%(याद रखें positionअगर यह अभी भी काम नहीं करता है)

Comments

topब्राउज़र / विंडो ऊंचाई के आधार पर आकार बदलने के लिए बढ़िया काम करता है। उस div के नीचे एक div कैसे है? आप clear2 डी div के नीचे होने वाले div से कैसे हो सकते हैं top:50%??

— फेडरिको

Sth नया सीखें। नहीं पता था कि ऊर्ध्वाधर गद्दी और मार्जिन चौड़ाई के सापेक्ष हैं। धन्यवाद।

— 23

सेट प्रतिशत ऊंचाई के साथ 'स्पेसर' डिव को जोड़ना भी संभव है। थोड़ा गंदा लगता है लेकिन यह काम करता है। इस उत्तर को देखें ।

— WCByrne

हमेशा के लिए क्या @%! ^ चौड़ाई के सापेक्ष ऊर्ध्वाधर मार्जिन और पेडिंग क्यों हैं ? क्या? पृथ्वी पर वह निर्णय क्यों किया गया?

— temporary_user_name

आपका जवाब नीचे दिए गए एलेन के जवाब की तुलना में बेहद असंगत रूप से मतदान है, जो एक सामान्य समाधान देता है, और मैंने इसे बहुत उपयोगी पाया और लगभग इसे नहीं देखा। top: 50%यदि आप सामग्री को अपने केंद्र द्वारा संरेखित करने की आवश्यकता नहीं है तो बहुत उपयोगी नहीं है।

— ओकोवको

Answer 2

थोड़ा अलग सवाल का जवाब: आप व्यूपोर्टvh के केंद्र में तत्वों को पैड करने के लिए उपयोग कर सकते हैं :

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

Comments

यह उत्तर उच्च मतदान क्यों नहीं है? क्या vh के उपयोग में कुछ गड़बड़ है?

— एलन डे

ऐसा इसलिए है क्योंकि यह एक उत्तर नहीं है जो मूल प्रश्न के अनुरूप है, यह एक उपयोगी ट्रिक है जो केवल कुछ संबंधित मामलों में काम करता है।

— willoller

उपयोग vhलगभग प्रतिशत के समान ही है ... कुछ मामलों में और भी बदतर। यह उत्तर प्रश्न के लिए अप्रासंगिक है

— vsync

Answer 3

आवश्यक व्यवहार का अनुकरण करने के लिए यहां दो विकल्प हैं। सामान्य समाधान नहीं है, लेकिन कुछ मामलों में मदद मिल सकती है। यहाँ ऊर्ध्वाधर रिक्ति की गणना बाहरी तत्व के आकार के आधार पर की जाती है, न कि उसके माता-पिता के रूप में, लेकिन यह आकार स्वयं माता-पिता के सापेक्ष हो सकता है और इस तरह रिक्ति भी सापेक्ष होगी।

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

पहला विकल्प: छद्म तत्वों का उपयोग करें, यहां ऊर्ध्वाधर और क्षैतिज अंतर बाहरी के सापेक्ष हैं। डेमो

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

क्षैतिज स्थान को बाहरी तत्व में ले जाने से यह बाहरी के माता-पिता के सापेक्ष हो जाता है। डेमो

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

दूसरा विकल्प: पूर्ण स्थिति का उपयोग करें। डेमो

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

Answer 4

बच्चे के तत्व को उसके मूल तत्व से पूरी तरह से तैनात करने के लिए आपको मूल तत्व पर सापेक्ष स्थिति और बच्चे के तत्व पर पूर्ण स्थिति निर्धारित करने की आवश्यकता है।

फिर बाल तत्व पर 'शीर्ष' माता-पिता की ऊंचाई के सापेक्ष है। इसलिए आपको बच्चे को उसकी खुद की ऊंचाई का 50% ऊपर 'अनुवाद' करना होगा।

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

फ्लेक्स बॉक्स का उपयोग करके एक और समाधान है।

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

आपको दोनों के फायदे / नुकसान मिलेंगे।

Comments

अनुवाद का उपयोग करना अपने स्वयं के आकार के सापेक्ष किसी तत्व को स्थानांतरित करने का एकमात्र वास्तविक तरीका है।

— एरन गोल्डिन

इसके लिए धन्यवाद। यह चुना हुआ उत्तर होना चाहिए।

— वेसम एल मह्डी

Answer 5

यह writing-modeसंपत्ति के साथ प्राप्त किया जा सकता है । यदि आप एक तत्व writing-modeको एक ऊर्ध्वाधर लेखन मोड में सेट करते हैं, जैसे किvertical-lr , इसके वंशजों का पैडिंग और मार्जिन के लिए प्रतिशत मान, दोनों आयामों में, चौड़ाई के बजाय ऊंचाई के सापेक्ष बन जाते हैं।

से कल्पना :

। । । मार्जिन और पैडिंग गुणों पर प्रतिशत, जिन्हें हमेशा CSS2.1 में युक्त ब्लॉक चौड़ाई के संबंध में गणना की जाती है, CSS3 में युक्त ब्लॉक के इनलाइन आकार के संबंध में गणना की जाती है ।

इनलाइन आकार की परिभाषा :

इनलाइन आयाम का एक माप: क्षैतिज लेखन मोड में भौतिक चौड़ाई (क्षैतिज आयाम) और ऊर्ध्वाधर लेखन मोड में भौतिक ऊंचाई (ऊर्ध्वाधर आयाम) को संदर्भित करता है।

उदाहरण, एक बदलते तत्व के साथ, जहां क्षैतिज मार्जिन चौड़ाई के सापेक्ष हैं और ऊर्ध्वाधर मार्जिन ऊंचाई के सापेक्ष हैं।

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

ऊर्ध्वाधर लेखन मोड का उपयोग उन परिस्थितियों में विशेष रूप से उपयोगी हो सकता है जहां आप एक तत्व का पहलू अनुपात स्थिर रहना चाहते हैं, लेकिन चाहते हैं कि इसका आकार चौड़ाई के बजाय सहसंबंध में पैमाने पर हो।

Comments

यह IMO है, और अधिक सुरुचिपूर्ण समाधान होगा, लेकिन (2018-05-05 के अनुसार), ऊर्ध्वाधर लेखन मोड अच्छी तरह से समर्थित नहीं हैं । उम्मीद है कि जल्द ही बदल जाएगा।

— झेनरॉक

@zanerock मैं निश्चित रूप से निश्चित हूं कि MDN कंपीटर टेबल पुराना है। उदाहरण के लिए, यह कहता है कि Safari को -webkit-उपसर्ग की आवश्यकता है , लेकिन caniuse के अनुसार Safari 11 के बाद से उपसर्ग की आवश्यकता नहीं है। क्या आपने इसे किसी भी ब्राउज़र के साथ आज़माया है जिसमें यह काम नहीं किया?

— जेम्स टी

नहीं, मुझे मानना ​​होगा कि मैंने यह मान लिया कि यह अच्छा था, स्वचालित भी।

— zanerock

Answer 6

एक पंक्ति पाठ को केंद्र में रखने का दूसरा तरीका है:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

या केवल

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

Answer 7

एक 50% पैडिंग अभ्यस्त आपके बच्चे को केंद्र में रखता है, इसे केंद्र के नीचे रखेगा। मुझे लगता है कि आप वास्तव में 25% की पैडिंग-टॉप चाहते हैं। हो सकता है कि आप केवल अंतरिक्ष से बाहर चल रहे हों क्योंकि आपकी सामग्री लंबी हो जाती है? क्या आपने पैडिंग-टॉप के बजाय मार्जिन-टॉप सेट करने की कोशिश की है?

EDIT: नेवरमाइंड, w3schools साइट कहती है

% युक्त तत्व की चौड़ाई के प्रतिशत में पैडिंग निर्दिष्ट करता है

तो शायद यह हमेशा चौड़ाई का उपयोग करता है? मैंने कभी गौर नहीं किया।

आप जो कर रहे हैं उसे प्रदर्शन का उपयोग करके प्राप्त किया जा सकता है: तालिका हालांकि (कम से कम आधुनिक ब्राउज़रों के लिए)। तकनीक यहां बताई गई है ।

Comments

धन्यवाद स्प्लिफ़। मैं समझता हूं कि मेरा 50% डिव की सामग्री को केंद्र में नहीं रखेगा। मेरे पास वास्तव में पाठ की केवल एक पंक्ति है जिसे लंबवत रूप से केंद्रित करने की आवश्यकता है। हालांकि लिंक के लिए बहुत बहुत धन्यवाद!

— रयान

यदि यह पाठ की सिर्फ एक पंक्ति है, तो आपने हास्यास्पद रूप से बड़े का उपयोग करके विचार किया है line-height, अर्थात, लाइन-ऊंचाई 200px बनाएं?

— SpliFF

@ टेक्स्ट को लंबवत केंद्रित करने के लिए, stackoverflow.com/questions/8865458/…

— उपयोगकर्ता को

आपका लिंक टूट गया है

— 13

Answer 8

यह एक बहुत ही रोचक बग है। (मेरी राय में, यह वैसे भी एक बग है) अच्छा लगता है!

के बारे में कैसे यह स्थापित करने के लिए, मैं कैमिलो मार्टिन जवाब की सिफारिश करेंगे। लेकिन ऐसा क्यों है , अगर आप लोग बुरा न मानें तो मैं इसे थोड़ा समझाना चाहता हूं।

---

में सीएसएस चश्मा मैंने पाया:

'पेडिंग'
प्रतिशत: ब्लॉक युक्त चौड़ाई का संदर्भ लें

... जो अजीब है, लेकिन ठीक है।

तो, एक माता width: 210px- पिता और एक बच्चे के साथ padding-top: 50%, मुझे एक गणना / गणना मूल्य मिलता है padding-top: 96.5px- जो अपेक्षित नहीं है105px ।

ऐसा इसलिए है क्योंकि विंडोज में (मैं अन्य ओएस के बारे में निश्चित नहीं हूं), सामान्य स्क्रॉलबारों का आकार प्रति डिफ़ॉल्ट 17px × 100%(या 100% × 17pxक्षैतिज सलाखों के लिए) है। उन 17pxsubstracted कर रहे हैं इससे पहले कि की गणना 50%, इसलिए 50% of 193px = 96.5px।

Comments

युक्ति का एक कारण है, और यह इसे बेहतर ढंग से समझाता है: hongkiat.com/blog/calculate-css-percentage-margins

— manikanta