HTML प्रोग्रामिंग का उपयोग करके एक छवि को कैसे केन्द्रित करें

...

वेब पेज की उपस्थिति निर्दिष्ट करने के लिए CSS का उपयोग करें।

एक वेब पेज कोडर हाइपरटेक्स्ट मार्कअप लैंग्वेज का उपयोग करता है ताकि वेब ब्राउजर को पेज पर प्रत्येक तत्व के कार्यात्मक उद्देश्य, जैसे पैराग्राफ, हेडिंग या सूची के बारे में बताया जा सके। एचटीएमएल 4 के बाद से, कैस्केडिंग स्टाइल शीट्स ने कोडर को ब्राउज़र को यह बताने का एक तरीका प्रदान किया है कि उन तत्वों में से प्रत्येक को कैसा दिखना चाहिए, यह परिभाषित करने से अलग कि वे क्या हैं। एक पृष्ठ में विभिन्न प्रकार के उपकरणों के लिए अलग-अलग CSS शैलियाँ हो सकती हैं, जैसे कि मोबाइल फ़ोन और डेस्कटॉप कंप्यूटर, HTML को बदलने के लिए कोडर की आवश्यकता के बिना पृष्ठ की उपस्थिति को बदलने की अनुमति देता है। छवि को केंद्र में रखने के लिए CSS गुणों का उपयोग करें।

चरण 1

HTML फ़ाइल में "img" टैग रखें जहाँ आप चाहते हैं कि आपकी छवि वेब पेज पर प्रदर्शित हो। यह "बॉडी" टैग के बीच और "h1" टैग के बाद होना चाहिए। उदाहरण के लिए,

दिन का वीडियो

यह आपका पाठ है।

तस्वीर का वर्णन

photo.jpg नाम की एक छवि को परिभाषित करता है जो 170 पिक्सेल चौड़ी और 50 पिक्सेल लंबी होती है। यह टॉप हेडिंग के बाद पेज पर पहली चीज है।

चरण 2

चित्र जैसे पृष्ठ तत्वों के आस-पास की जगह को परिभाषित करने के लिए "मार्जिन" सीएसएस विशेषता का उपयोग करें। मार्जिन विशेषता के लिए "ऑटो" मान वेब ब्राउज़र को स्वचालित रूप से स्थान की मात्रा निर्धारित करने के लिए कहता है। इसलिए, तस्वीर का वर्णन परिभाषित करता है कि छवि के चारों ओर का स्थान ब्राउज़र द्वारा निर्धारित किया जाता है।

चरण 3

पृष्ठ तत्व कैसे प्रदर्शित होता है, यह परिभाषित करने के लिए "डिस्प्ले" प्रॉपर्टी का उपयोग करें। डिस्प्ले प्रॉपर्टी के लिए "ब्लॉक" मान वेब ब्राउजर को ऊपर और नीचे की जगह के साथ तत्व को अपनी लाइन पर प्रदर्शित करने के लिए कहता है। इसलिए, तस्वीर का वर्णन एक ही छवि को परिभाषित करता है, लेकिन "डिस्प्ले: ब्लॉक;" का जोड़ अब इसे अपनी लाइन पर रखता है।

चरण 4

यह सत्यापित करने के लिए कि छवि ठीक से केंद्रित है, वेब पेज को कई अलग-अलग ब्राउज़रों में देखें।

टिप

छवि विवरण को "alt" टैग में शामिल करें। यह आपके पृष्ठ को दृष्टिबाधित पाठकों के लिए अधिक सुलभ बनाता है और यह सुनिश्चित करता है कि आपका कोड मानकों के अनुरूप है। तस्वीर का वर्णन

श्रेणियाँ

हाल का

वर्ड में सभी फिगर नंबर कैसे अपडेट करें

वर्ड में सभी फिगर नंबर कैसे अपडेट करें

छवि क्रेडिट: केटी मार्टीनोवा/आईस्टॉक/गेटी इमेजे...

क्यूब्ड सिंबल कैसे टाइप करें

क्यूब्ड सिंबल कैसे टाइप करें

क्यूब किए गए प्रतीक के लिए उचित प्रारूप उस संख्...

डिश के साथ पीआईपी का उपयोग कैसे करें

डिश के साथ पीआईपी का उपयोग कैसे करें

पिक्चर-इन-पिक्चर (पीआईपी) तकनीक आपको एक टीवी स्...