HTML और CSS में डिव को केन्द्रित करने के विभिन्न तरीके

मुखपृष्ठ > प्रोग्रामिंग > HTML और CSS में डिव को केन्द्रित करने के विभिन्न तरीके

HTML और CSS में डिव को केन्द्रित करने के विभिन्न तरीके

2024-08-02 को प्रकाशित

ब्राउज़ करें:904

Different Ways to Center a Div in HTML and CSS

लिंक्डइन पर मुझे फ़ॉलो करें
Github.com पर मेरा अनुसरण करें

क्लिक करें और पढ़ें

बोअरिंग सेट के बिना हम कोडिंग को पुनः निर्देशित कर सकते हैं!

1. फ्लेक्सबॉक्स का उपयोग करना

फ्लेक्सबॉक्स एक शक्तिशाली लेआउट टूल है जो क्षैतिज और लंबवत दोनों तरह से तत्वों को केंद्र में रखना आसान बनाता है।

उदाहरण:



    
    
    Center Div with Flexbox
    


    
        Centered with Flexbox

2. ग्रिड का उपयोग करना

सीएसएस ग्रिड एक और शक्तिशाली लेआउट प्रणाली है जो तत्वों को आसानी से केंद्र में रख सकती है।

उदाहरण:



    
    
    Center Div with Grid
    


    
        Centered with Grid

3. एब्सोल्यूट पोजिशनिंग और ट्रांसफॉर्म का उपयोग करना

इस विधि में डिव को बिल्कुल सही स्थिति में रखना और उसे केन्द्रित करने के लिए ट्रांसफॉर्म का उपयोग करना शामिल है।

उदाहरण:



    
    
    Center Div with Absolute Positioning
    


    
        Centered with Absolute Positioning

4. मार्जिन ऑटो का उपयोग करना

सेटिंग मार्जिन: एक निर्दिष्ट चौड़ाई वाले तत्व पर ऑटो इसे क्षैतिज रूप से केंद्रित कर सकता है।

उदाहरण:



    
    
    Center Div with Margin Auto
    


    
        Centered with Margin Auto

5. टेबल डिस्प्ले का उपयोग करना

यह विधि किसी तत्व को केन्द्रित करने के लिए डिस्प्ले: टेबल और डिस्प्ले: टेबल-सेल का उपयोग करती है।

उदाहरण:



    
    
    Center Div with Table Display
    


    
        
            Centered with Table Display

बायी
हैप्पी कोडिंग!

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/muhammedshamal/different-ways-to-center-a-div-in-html-and-css-47df?1 यदि कोई उल्लंघन है, तो कृपया स्टडी_गोलंग@163 से संपर्क करें इसे हटाने के लिए .com

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

बहु-आयामी सरणियों के लिए PHP में JSON पार्सिंग को सरल कैसे करें?
] To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do this, use the json_decode function with the ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
आप Laravel ब्लेड टेम्प्लेट में चर को कैसे परिभाषित कर सकते हैं?
] "{{}}}" का उपयोग करके चर असाइन करते समय, यह सीधा है, यह हमेशा सबसे सुरुचिपूर्ण समाधान नहीं हो सकता है। $ old_section = "जो भी"...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
PHP का उपयोग करके MySQL में बूँदों (चित्र) को ठीक से कैसे डालें?
] यह गाइड आपके छवि डेटा को सफलतापूर्वक संग्रहीत करने के लिए समाधान प्रदान करेगा। ImageStore (ImageId, Image) मान ('$ यह- & gt; image_id', ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
मैं पांडा डेटाफ्रेम में कुशलता से कॉलम का चयन कैसे करूं?
] पंडों में, कॉलम का चयन करने के लिए विभिन्न विकल्प हैं। संख्यात्मक सूचकांक यदि कॉलम सूचकांक ज्ञात हैं, तो उन्हें चुनने के लिए ILOC फ़ंक्शन का ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
पीडीओ मापदंडों के साथ क्वेरी की तरह सही तरीके से उपयोग कैसे करें?
$ params = सरणी ($ var1, $ var2); $ stmt = $ हैंडल-> तैयार करें ($ क्वेरी); $ stmt-> निष्पादित ($ params); त्रुटि % संकेतों के गलत समावेश में निहित ह...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
मैं जावा में निर्देशिका परिवर्तन सहित कमांड प्रॉम्प्ट कमांड को कैसे निष्पादित कर सकता हूं?
] यद्यपि आपको कोड स्निपेट मिल सकते हैं जो कमांड प्रॉम्प्ट खोलते हैं, वे अक्सर निर्देशिकाओं को बदलने और अतिरिक्त कमांड को निष्पादित करने की क्षमता में ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
$Ubuntu/linux पर mysql-python स्थापित करते समय \ "mysql_config को कैसे नहीं मिला \" त्रुटि नहीं मिली?$
Ubuntu/linux पर mysql-python स्थापित करते समय \ "mysql_config को कैसे नहीं मिला \" त्रुटि नहीं मिली?
] यह त्रुटि एक लापता MySQL विकास पुस्तकालय के कारण उत्पन्न होती है। निम्नलिखित कमांड का उपयोग करके पायथन-mysqldb स्थापित करें: sudo apt-get python-...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
दशमलव का उपयोग करके घातीय संकेतन में संख्या को कैसे पार्स करें।
] ऐसा इसलिए है क्योंकि डिफ़ॉल्ट पार्सिंग विधि घातीय संकेतन को पहचान नहींती है। इस तरह के स्ट्रिंग को सफलतापूर्वक पार्स करने के लिए, आपको स्पष्ट रूप ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
मुझे MySQL त्रुटि #1089 क्यों मिल रही है: गलत उपसर्ग कुंजी?
] आइए इस त्रुटि और इसके रिज़ॉल्यूशन की बारीकियों में तल्लीन करें। उपसर्ग कुंजियों को स्ट्रिंग कॉलम की एक विशिष्ट उपसर्ग लंबाई को अनुक्रमित करने के लिए...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
जावास्क्रिप्ट ऑब्जेक्ट्स में गतिशील रूप से चाबियां कैसे सेट करें?
] सही दृष्टिकोण वर्ग कोष्ठक को नियोजित करता है: jsobj ['कुंजी' i] = 'उदाहरण' 1; जावास्क्रिप्ट में, सरणियाँ एक विशेष प्रकार का ऑ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
मैं जावा स्ट्रिंग में कई सब्सट्रेट्स को कुशलता से कैसे बदल सकता हूं?
] हालाँकि, यह बड़े तार के लिए अक्षम हो सकता है या जब कई तार के साथ काम कर रहा है। नियमित अभिव्यक्तियाँ आपको जटिल खोज पैटर्न को परिभाषित करने और एकल ऑप...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
क्या जावा में कलेक्शन ट्रैवर्सल के लिए एक-प्रत्येक लूप और एक पुनरावृत्ति का उपयोग करने के बीच एक प्रदर्शन अंतर है?
के लिए यह लेख इन दो दृष्टिकोणों के बीच दक्षता के अंतर की पड़ताल करता है। यह आंतरिक रूप से iterator का उपयोग करता है: सूची a = new ArrayList ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
एक पांडस डेटाफ्रेम कॉलम को डेटटाइम प्रारूप में कैसे परिवर्तित करें और तिथि तक फ़िल्टर करें?
] अस्थायी डेटा के साथ काम करते समय, टाइमस्टैम्प शुरू में तार के रूप में दिखाई दे सकते हैं, लेकिन सटीक विश्लेषण के लिए एक डेटाइम प्रारूप में परिवर्तित ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
कैसे regex का उपयोग करके PHP में कुशलता से कोष्ठक के भीतर पाठ निकालें
] एक दृष्टिकोण PHP के स्ट्रिंग हेरफेर कार्यों का उपयोग करने के लिए है, जैसा कि नीचे प्रदर्शित किया गया है: $ फुलस्ट्रिंग = "इस (पाठ) को छोड़क...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया
Java.net.urlconnection और multivart/फॉर्म-डेटा एन्कोडिंग का उपयोग करके अतिरिक्त मापदंडों के साथ फ़ाइलों को कैसे अपलोड करें?
] यहाँ प्रक्रिया का एक टूटना है: मल्टीपार्ट/फॉर्म-डाटा एन्कोडिंग मल्टीपार्ट/फॉर्म-डेटा को पोस्ट अनुरोधों के लिए डिज़ाइन किया गया है जो बाइनरी ...

प्रोग्रामिंग 2025-03-26 को पोस्ट किया गया