एक प्रतिक्रियाशील वेबसाइट उस स्क्रीन आकार और डिवाइस आयाम को अनुकूलित कर सकती है जिसमें उसे देखा जा रहा है। वेबसाइट की रिस्पॉन्सिबिलिटी के साथ-साथ यह भी जरूरी है कि इमेज और टेक्स्ट संरेखित और रिस्पॉन्सिव हों। संरेखित छवियाँ वे हैं जो पाठ को अपने चारों ओर लपेटती हैं। जबकि संरेखित टेक्स्ट वह होता है जो संपूर्ण पैराग्राफ जैसा दिखता है।
यह आलेख छवियों और पाठ को प्रतिक्रियात्मक रूप से संरेखित करने की विधि पर गौर करेगा।
छवियों और टेक्स्ट को जिम्मेदारीपूर्वक कैसे संरेखित करें?
बूटस्ट्रैप का उपयोग करके छवियों और पाठ सहित सामग्री को प्रतिक्रियात्मक रूप से संरेखित किया जा सकता है। प्रदर्शन प्रदान करने के लिए, हमने दो उदाहरण सूचीबद्ध किए हैं:
- केंद्र में पाठ को लंबवत रूप से और छवि को क्षैतिज रूप से संरेखित करें।
- पाठ और प्रतिक्रियाशील छवि को बाएँ संरेखित करें।
उदाहरण 1: केंद्र में पाठ को लंबवत रूप से और छवि को क्षैतिज रूप से संरेखित करें
सबसे पहले, छवि को क्षैतिज रूप से और पाठ को लंबवत रूप से केन्द्रित करने का प्रयास करें। उस उद्देश्य के लिए, नीचे दिए गए निर्देशों का पालन करें:
चरण 1: एक HTML संरचना बनाएं
HTML संरचना बनाते समय, सबसे पहले, “लिंक करें” बूटस्ट्रैप और बाहरी सीएसएस फ़ाइल भी। उसके बाद, एक बनाएं चरण 2: सीएसएस लागू करें कंटेनर पर: पर पाठ पर: यह देखा जा सकता है कि पाठ लंबवत रूप से केन्द्रित है, और छवि क्षैतिज रूप से केन्द्रित है: उदाहरण 2: पाठ और प्रतिक्रियाशील छवि को बाएँ संरेखित करें इस दिए गए उदाहरण में, छवि और पाठ बाईं ओर संरेखित होंगे। उस उद्देश्य के लिए, नीचे दिए गए चरणबद्ध निर्देशों का पालन करें: चरण 1: एक HTML संरचना बनाएं HTML कोड ऊपर जैसा ही है, उदाहरण में उपयोग किया गया है। चरण 2: सीएसएस लागू करें कंटेनर पर: पर पाठ पर: आउटपुट पुष्टि करता है कि पाठ और छवि बाएँ-संरेखित हैं: छवियों और पाठ को उत्तरदायी रूप से संरेखित करने के लिए, पहले सीएसएस में एक ग्रिड या फ्लेक्स लेआउट बनाएं, फिर 'सेट करें' संरेखित-आइटम 'संपत्ति का मूल्य' केंद्र ”। ऐसा करने से सीएसएस में छवियां और टेक्स्ट प्रतिक्रियात्मक रूप से संरेखित हो जाएंगे। इस आलेख ने उपयोगकर्ताओं को छवियों और पाठ को उत्तरदायी रूप से संरेखित करने के लिए एक संपूर्ण मार्गदर्शिका प्रदान की है। टैग और पाठ:
< शरीर >
< डिव कक्षा = 'कंटेनर' >
< आईएमजी स्रोत = 'test-image.jpg' सब कुछ = 'परीक्षण छवि' >
< डिव वर्ग = 'मूलपाठ' > यह कुछ पाठ है. डिव >
डिव >
शरीर >
:
.कंटेनर {
प्रदर्शन: मोड़ना ;
पाठ-संरेखण: केंद्र;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
}
आईएमजी {
अधिकतम चौड़ाई: 100 % ;
ऊंचाई: ऑटो;
}
।मूलपाठ {
फ़ॉन्ट-आकार: 16px;
अधिकतम-चौड़ाई: 390px;
}
:
.कंटेनर {
प्रदर्शन: मोड़ना ;
फ्लेक्स-दिशा: स्तंभ;
संरेखित-आइटम: फ्लेक्स-स्टार्ट;
पाठ-संरेखण: बाएँ;
}
आईएमजी {
अधिकतम चौड़ाई: 100 % ;
ऊंचाई: ऑटो;
}
।मूलपाठ {
फ़ॉन्ट-आकार: 16px;
अधिकतम-चौड़ाई: 390px;
}
निष्कर्ष