HTML में इमेज को कैसे सेंटर करें

लेखक: Mark Sanchez
निर्माण की तारीख: 6 जनवरी 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
15: HTML और CSS का उपयोग करके इमेज कैसे डालें | एचटीएमएल और सीएसएस सीखें | एचटीएमएल ट्यूटोरियल | सीएसएस की मूल बातें
वीडियो: 15: HTML और CSS का उपयोग करके इमेज कैसे डालें | एचटीएमएल और सीएसएस सीखें | एचटीएमएल ट्यूटोरियल | सीएसएस की मूल बातें

विषय

गुण संरेखित उपनाम एचटीएमएल> HTML5 के बाद से बहिष्कृत कर दिया गया है। हालांकि यह विशेषता अभी भी अधिकांश वेब ब्राउज़र में काम करती है, यह अनुशंसा की जाती है कि आप कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके छवियों को संरेखित करें। इस लेख में, हम आपको दिखाने जा रहे हैं कि CSS और डिप्रेस्ड टैग का उपयोग करके छवियों को कैसे केन्द्रित किया जाए। संरेखित.

कदम

विधि 1 में से 2: CSS (अनुशंसित)

  1. 1 छवि के लिए HTML कोड जोड़ें। आप छवि को संरेखित करने के लिए कैस्केडिंग स्टाइल शीट (सीएसएस) का उपयोग करेंगे, लेकिन आपको इसे HTML का उपयोग करके पृष्ठ पर रखना होगा। निम्नलिखित टैग का उपयोग करने का एक उदाहरण है आईएमजी> अपने कोड में एक छवि डालने के लिए:

    img src = "dog.webp" alt = "यह एक कुत्ते की तस्वीर है">

    • के बजाय कुत्ता.webp छवि फ़ाइल का नाम बदलें, और "alt" के बाद छवि का विवरण दर्ज करें। अर्थ केंद्र "कक्षा" के लिए नहीं बदलें, क्योंकि आप उस नाम से एक CSS क्लास बनाएंगे।
  2. 2 सीएसएस कोड खोजें। अगर आपकी साइट पर एक अलग CSS फ़ाइल है, तो उसे खोलें। यदि नहीं, तो HTML फ़ाइल के शीर्ष पर, टैग के अंदर CSS सबसे अधिक संभावना है सिर>... टैग खोजने के लिए फ़ाइल के शीर्ष पर स्क्रॉल करें शैली> / शैली>.
    • अगर टैग शैली> / शैली> नहीं, उन्हें जोड़ें। अधिक जानकारी के लिए इस लेख को पढ़ें।
  3. 3 छवि को संरेखित करने के लिए CSS जोड़ें। छवि को पृष्ठ पर प्रदर्शित करने के लिए "50%" के बजाय, आप एक भिन्न मान दर्ज कर सकते हैं। आप "100%" के मान के साथ छवि को केंद्र में नहीं रख पाएंगे, इसलिए यह संख्या भिन्न होनी चाहिए।

    केंद्र {प्रदर्शन: ब्लॉक; मार्जिन-बाएं: ऑटो; मार्जिन-दाएं: ऑटो; चौड़ाई: 50%; }

  4. 4 अपने परिवर्तन सहेजें। HTML फ़ाइल और CSS फ़ाइल (यदि कोई हो) सहेजें। यह छवि को केंद्र में रखेगा।
    • टैग के अंदर भी आईएमजी> जोड़ सकते हैं अन्य छवियों को केन्द्रित करने के लिए।

विधि २ का २: HTML में "संरेखित करें" विशेषता

  1. 1 एक नया पैराग्राफ बनाएं। हालांकि छवियों को केंद्रित करने की यह विधि बहिष्कृत कर दी गई है, फिर भी यह कई ब्राउज़रों में काम करती है। हालांकि, जब ब्राउज़र निर्दिष्ट विशेषता का समर्थन करना बंद कर देते हैं, तो हम साइट को कार्यात्मक रखने के लिए CSS का उपयोग करने की सलाह देते हैं। याद रखें कि विशेषता संरेखित चित्र को केवल उस तत्व के अंदर केन्द्रित करेगा जो उसके चारों ओर है (उदाहरण के लिए, टैग के अंदर पी> / पी> या डिव> / डिव>) उदाहरण के तौर पर, HTML फ़ाइल में, हम जोड़कर एक नया पैराग्राफ बनाएंगे पी> एक अलग लाइन पर।
  2. 2 छवि के लिए HTML कोड जोड़ें। टैग के बाद निम्न कोड दर्ज करें पी>... एक गाइड के रूप में इस उदाहरण का प्रयोग करें:

    p> img src = "dog.webp" alt = "तस्वीर" संरेखित करें = "मध्य">

    • के बजाय कुत्ता.webp छवि फ़ाइल का नाम बदलें, और "alt" के बाद छवि का विवरण दर्ज करें।
    • मध्य विशेषता ब्राउज़र को पृष्ठ के केंद्र में चित्र प्रदर्शित करने के लिए कहती है।
  3. 3 पैराग्राफ टैग बंद करें। ऐसा करने के लिए, जोड़ें / पी> चित्र टैग के बाद। तैयार कोड कुछ इस तरह दिखना चाहिए:

    p> img src = "dog.webp" alt = "पिक्चर" अलाइन = "मिडिल"> / p>

  4. 4 अपने परिवर्तन सहेजें। यह छवि को केंद्र में रखेगा।