बूटस्ट्रैप के साथ छवि केंद्रित करने के लिए एक व्यापक मार्गदर्शिका

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

.center-block Class

ट्विटर बूटस्ट्रैप संस्करण 3.0.3 ".सेंटर-ब्लॉक" वर्ग की शुरुआत की। यह क्लास आपको इसके डिस्प्ले को "ब्लॉक" पर सेट करके और स्वचालित बाएँ और दाएँ मार्जिन लागू करके एक तत्व को केन्द्रित करने की अनुमति देता है।

इस क्लास का उपयोग करने के लिए, बस इसे अपने छवि टैग के HTML कोड में जोड़ें। निम्नलिखित उदाहरण दर्शाता है कि यह कैसे करना है:

".center-block" वर्ग निम्नलिखित CSS शैली लागू करता है:

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

यह शैली सुनिश्चित करती है कि छवि को एक ब्लॉक तत्व के रूप में प्रदर्शित किया जाएगा और इसके बाएँ और दाएँ मार्जिन को "ऑटो" पर सेट करके क्षैतिज रूप से केंद्रित किया जाएगा।

.container और को समझना। row Classes

बूटस्ट्रैप में ग्रिड सिस्टम बनाने के लिए ".container" और ".row" क्लासों का उपयोग किया जाता है। दिए गए उदाहरण में, ".container" वर्ग ग्रिड के लिए सीमाएं स्थापित करता है, और ".row" वर्ग कंटेनर को 12 बराबर स्तंभों में विभाजित करता है।

पंक्ति के भीतर ".span4" वर्गों का उपयोग करके, हम बूटस्ट्रैप को तीन तत्वों में से प्रत्येक के लिए 12 में से 4 कॉलम आवंटित करने के लिए कहते हैं: पहला और तीसरा कॉलम खाली रहता है, जबकि दूसरे कॉलम में छवि होती है।

निष्कर्ष

बूटस्ट्रैप फ्रेमवर्क का उपयोग करके किसी छवि के मृत केंद्र को क्षैतिज रूप से संरेखित करने के लिए ".center-block" वर्ग का उपयोग करना सबसे आसान और सबसे कुशल तरीका है। इसके लिए न्यूनतम अतिरिक्त कोड की आवश्यकता होती है और यह बूटस्ट्रैप ग्रिड सिस्टम के साथ सहजता से एकीकृत हो जाता है। इस समाधान को कार्यान्वित करके, आप अपने वेब अनुप्रयोगों की दृश्य अपील और उपयोगकर्ता अनुभव को बढ़ाने के लिए छवियों को प्रभावी ढंग से स्थान दे सकते हैं।