सीएसएस तत्वमीमांसा: क्यों पेज लंबवत संरेखण इतना मुश्किल है?

Question

पेज के सापेक्ष, सीएसएस में क्षैतिज संरेखण आसान है - एक margin:0 auto काफी समय से आप हो जाता है, और कुछ अन्य मामलों के लिए एक text-align:center।

गुरुओं को मेरा प्रश्न लंबवत रूप से संरेखित करने का तरीका नहीं है, लेकिन क्यों यह इतना कठिन है? margin:auto 0 क्यों नहीं है? मेरा मतलब है, एक प्रोग्रामिंग परिप्रेक्ष्य से।

सैद्धांतिक रूप से, ऐसा लगता है जैसे एक ही एल्गोरिदम केंद्रित के दोनों प्रकार पर लागू होगा।

Answer 1

अच्छा सवाल और मुझे नहीं पता, लेकिन मुझे संदेह होगा कि समस्या की जड़ एचटीएमएल में झूठ बोलने जा रही है और इसलिए यह मूल रूप से दस्तावेज अर्थशास्त्र के लिए लेआउट/प्रिंटिंग सेमेन्टिक्स के विपरीत प्रस्तुतीकरण इंजन है। सीएसएस का वर्णन पैराग्राफ, शीर्षकों, और दस्तावेज़ चिंताओं के सभी प्रकार में असाधारण अच्छा है और वास्तव में कमजोर है जब यह बड़ा डीटीपी लेआउट कार्यों के लिए जो हर किसी को अब अपनी वेबसाइटों होना चाहता है के लिए आता है।

संक्षेप में: मुझे लगता है समस्या यह है कि एचटीएमएल बातें इसके लिए इरादा नहीं था के लिए काम सौंपा जा रहा है। आश्चर्यचकित हो जाओ।

Answer 2

संकल्पनात्मक रूप से, सीएसएस नियम एचटीएमएल में दिखाई देने वाले क्रम में दस्तावेज़ के तत्वों पर लागू होते हैं, यानी, डीओएम पेड़ के प्री-ऑर्डर ट्रैवर्सल में। ऐतिहासिक रूप से, ऐसा इसलिए था कि सीएसएस को लागू किया जा रहा था क्योंकि दस्तावेज़ लोड किया जा रहा था, लेकिन गतिशील एचटीएमएल और गतिशील सीएसएस के साथ भी, एक ही पास में सीएसएस को लागू करने में सक्षम होने के प्रदर्शन के फायदे हैं।

यही कारण है कि सीएसएस "एक एक एक बी के बाद" या "एक एक है जो एक बी में शामिल है", जबकि यह कहने के लिए "एक एक एक बी से पहले" या "एक एक एक के अंदर निहित संभव है के लिए कोई चयनकर्ताओं है बी ", क्योंकि बाद के मामलों में, ए प्री-ऑर्डर ट्रैवर्सल में बी से पहले है।

कार्यक्षेत्र केंद्रित क्योंकि समय बच्चे तत्व (तत्व केंद्रित करने के लिए) के लिए सीएसएस संसाधित किया जाता है पर मुश्किल है, माता-पिता और बच्चे के तत्वों की ऊंचाई (चाइल्ड तत्व के ऑफसेट शीर्ष गणना करने के लिए आवश्यक दो मानों) ज्ञात नहीं हैं, क्योंकि वे दोनों उन तत्वों पर निर्भर करते हैं जिन्हें अभी तक संसाधित नहीं किया गया है।

मूल तत्व की ऊंचाई पर निर्भरता पूर्ण स्थिति द्वारा पार किया जाता है: top: 50%। यह मूल तत्व की ऊंचाई के बाद तक लंबवत ऑफसेट की गणना प्रभावी ढंग से रोकता है।

इसी तरह, CSS3 ट्रांसफॉर्म बच्चे की ऊंचाई के लिए खाता कर सकते हैं: transform: translateY(-50%)। CSS3 से पहले, नकारात्मक margin-top का उपयोग करना आम था, लेकिन इसके लिए बच्चे तत्व पर निश्चित ऊंचाई निर्धारित करना आवश्यक था।