सीएसएस के साथ छवियों को कैसे केन्द्रित करें

CSS का उपयोग करके एक छवि को केन्द्रित करना चाहते हैं? संरेखण के मुद्दे अक्सर वेब डिजाइनरों के लिए निराशा का स्रोत होते हैं। सौभाग्य से, सीएसएस के साथ एक छवि को केंद्रित करना वास्तव में सरल है, और हम आपको दिखाएंगे कि इसे कुछ चरणों में कैसे किया जाए।

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

1. मार्जिन संपत्ति का प्रयोग करें

सेटिंग अंतर संपत्ति सीएसएस का उपयोग करके एक छवि को क्षैतिज रूप से केंद्रित करने के सबसे आसान तरीकों में से एक है। मार्जिन का एक मुख्य घटक है सीएसएस बॉक्स मॉडल.

सबसे पहले, आपको छवि तत्व को इनलाइन एक से एक ब्लॉक में बदलना होगा। ब्लॉक-स्तरीय HTML तत्व अपने मूल तत्व की पूरी चौड़ाई पर कब्जा कर लेते हैं और एक पृष्ठ की पूरी चौड़ाई लेने में सक्षम होते हैं।

एक छवि तत्व को एक ब्लॉक तत्व बनाकर, आप उसके क्षैतिज मार्जिन को समायोजित करके उसकी स्थिति में हेरफेर कर सकते हैं। यह निर्धारित करने के लिए कि पृष्ठ पर छवि कितनी जगह लेती है, आपको छवि के लिए एक विशिष्ट चौड़ाई निर्धारित करने की भी आवश्यकता होगी।

आप जो भी चौड़ाई चुनते हैं, छवि के लिए समान बाएँ और दाएँ हाशिये की आवश्यकता होगी। मार्जिन प्रॉपर्टी को का मान देकर आप इसे आसानी से प्राप्त कर सकते हैं ऑटो:

img.केंद्र {
 प्रदर्शन क्षेत्र;
 मार्जिन-बाएं: ऑटो;
 मार्जिन-दाएं: ऑटो;
 चौड़ाई: 800px;
}

2. फ्लेक्सबॉक्स लेआउट का प्रयोग करें

इस विधि में छवि को ब्लॉक-स्तरीय तत्व में डालने की आवश्यकता होती है, आमतौर पर a डिव:

एक बार ऐसा करने के बाद, आप इसकी उपस्थिति में हेरफेर करने के लिए कुछ गुण जोड़ सकते हैं। आप दो CSS गुणों का उपयोग करेंगे।

पहला है दिखाना संपत्ति इसके मूल्य के साथ. पर सेट है मोड़ना. आप भी कर सकते हैं HTML में तत्वों को संरेखित करने के लिए फ्लेक्स का उपयोग करें. दूसरी संपत्ति जो आप अपने डिव में जोड़ेंगे वह है औचित्य-सामग्री, जिसका मान पर सेट है केंद्र इस तरह:

div.केंद्र {
 प्रदर्शन: फ्लेक्स;
 औचित्य-सामग्री: केंद्र;
}

3. पदावनत केंद्र तत्व का प्रयोग करें

वेब सर्वोत्तम अभ्यास आपको स्टाइलिंग के लिए CSS और शब्दार्थ के लिए HTML का उपयोग करने के लिए प्रोत्साहित करते हैं, इसलिए आपको इस HTML पद्धति का उपयोग नहीं करना चाहिए। केंद्र टैग, जो इसकी सामग्री को क्षैतिज रूप से केन्द्रित करता है, HTML5 में बहिष्कृत है।

लेकिन अगर आपको चाहिए, तो यहां केवल HTML का उपयोग करके किसी छवि को केंद्र में रखने का तरीका बताया गया है। बस लपेटो आईएमजी एक केंद्र टैग में टैग करें जैसे:

एचटीएमएल में अपनी छवियों को कैसे संरेखित करें

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

एक बात का ध्यान रखें कि HTML और CSS का उपयोग करके छवियों को केंद्र में रखने के कुछ और तरीके हैं। टेक्स्ट और इनलाइन इमेज दोनों के लिए काम करने वाली एक सामान्य विधि है पाठ संरेखित संपत्ति।

CSS के साथ अपने वेब पेज में टेक्स्ट को सेंटर अलाइन कैसे करें

आगे पढ़िए

लेखक के बारे में