"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > सीएसएस में लंबवत संरेखण वास्तव में कैसे काम करता है?

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

2024-11-09 को प्रकाशित
ब्राउज़ करें:820

How Does Vertical Alignment Actually Work in CSS?

सीएसएस में लंबवत संरेखण: बारीकियों को समझना

वर्टिकल-एलाइन प्रॉपर्टी आपको एक इनलाइन तत्व को उसके मूल तत्व के भीतर लंबवत रूप से रखने की अनुमति देती है। हालाँकि, इसका व्यवहार तब तक अप्रत्याशित हो सकता है जब तक आप अंतर्निहित सिद्धांतों को नहीं समझ लेते।

इनलाइन तत्व और ऊंचाई

वर्टिकल-एलाइन केवल इनलाइन तत्वों को प्रभावित करता है।

और

जैसे तत्व ब्लॉक-स्तरीय हैं और प्रभावित नहीं होते हैं। अंतर्निहित लाइन ऊंचाई के बिना इनलाइन तत्वों के लिए, जैसे कि सीएसएस में लंबवत संरेखण वास्तव में कैसे काम करता है? और , आपको लाइन-ऊंचाई संपत्ति का उपयोग करके स्पष्ट रूप से एक सेट करने की आवश्यकता है।

ऊंचाई और ऊर्ध्वाधर संरेखण

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

इनलाइन तत्वों की स्थिति

पाठ-संरेखण के विपरीत , जो ब्लॉक-स्तर वाले तत्व पर लागू होता है, वर्टिकल-एलाइन को उस इनलाइन तत्व पर लागू किया जाना चाहिए जिसे आप रखना चाहते हैं।

ब्राउज़र अंतर

पुराने ब्राउज़र नहीं कर सकते हैं लगातार लंबवत-संरेखण का समर्थन करें। हालाँकि, आधुनिक ब्राउज़र गैर-इनलाइन तत्वों पर उपयोग किए जाने पर भी इसे अच्छी तरह से संभालते हैं।

टेक्स्ट को #इनर में लंबवत केंद्रित करने के लिए, वर्टिकल-एलाइन: मिडिल से #हेडर लागू करें:

#हेडर { प्रदर्शन: इनलाइन-ब्लॉक; लाइन-ऊंचाई: 1em; मार्जिन: 0; लंबवत-संरेखित करें: मध्य; }

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3