जावास्क्रिप्ट केंद्र पाठ

| | | | | | | | | | | | | | | |

इस CSS ट्यूटोरियल में, हम देखेंगे कि टेक्स्ट को कैसे सेंटर किया जाए और एलिमेंट को लॉक किया जाए। लेआउट में तत्वों को क्षैतिज और लंबवत रूप से मध्य करने के लिए आप कई युक्तियों का उपयोग कर सकते हैं।

एक बड़े तत्व में संरेखित पाठ को केंद्र में रखने के लिए, text-align: center; का उपयोग करें जैसा कि नीचे दिखाया गया है :

मैं हूं एक div

और सभी टेक्स्ट टेक्स्ट-एलाइन द्वारा केंद्रित हैं: केंद्र

संरेखण केंद्रीय ब्लॉक एलिमेंट:

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

मैं एक div हूं

और सभी टेक्स्ट टेक्स्ट-एलाइन: सेंटर

द्वारा केंद्रित हैं।

छवि को केंद्र में संरेखित करें:

छवि को केंद्र में रखने के लिए, CSS चयनकर्ता में, बड़े पैमाने पर प्रदर्शन को संशोधित करें और फिर इसे नियंत्रित करें % या px का उपयोग करके छवि तत्व की चौड़ाई। मार्जिन को ऑटो पर सेट करें:

मैं एक div हूं

और सभी टेक्स्ट टेक्स्ट-एलाइन: सेंटर

द्वारा केंद्रित हैं।

अंतर्निहित छवि को केंद्र में रखने के लिए, प्रदर्शन को ब्लॉक में बदलें, फिर मार्जिन को ऑटो पर सेट करें, px या% का उपयोग करके चौड़ाई की जांच करें

kittens

एक div में लंबवत और क्षैतिज रूप से केंद्र:

पैडिंग:

एक में पैडिंग को समायोजित करना है - फिर आप अनुच्छेद को क्षैतिज रूप से केन्द्रित करने के लिए text-align: center का उपयोग कर सकते हैं: < br

मैं एक div हूं

और सभी टेक्स्ट टेक्स्ट-एलाइन: सेंटर

द्वारा केंद्रित हैं।

अंतर्निहित छवि को केंद्र में रखने के लिए, प्रदर्शन को ब्लॉक में बदलें, फिर मार्जिन को ऑटो पर सेट करें, px या% का उपयोग करके चौड़ाई की जांच करें

kittens

लाइन-ऊंचाई:

आप उस ब्लॉक एलिमेंट की ऊंचाई के लिए लाइन-ऊंचाई भी सेट कर सकते हैं, जिसे आप टेक्स्ट के साथ केंद्र में रखते हैं -एलिग्न: सेंटर तत्व को केंद्र में संरेखित करने के लिए। यदि आपके पास कई लाइनें हैं, तो माता-पिता और बच्चे पर लाइन-ऊंचाई का उपयोग करें और बच्चे को <कोड>वर्टिकल-एलाइन: मिडिल और <कोड>डिस्प्ले: इनलाइन-ब्लॉक जोड़ें:



flexbox:

अंत में, हम flexbox का उपयोग करके तत्वों को केन्द्रित कर सकते हैं। प्रदर्शन सेट करें: उन बच्चों के मूल तत्व के लिए फ्लेक्स करें जिन्हें आप केंद्र में रखना चाहते हैं, फिर इसे केंद्र में रखने के लिए संरेखण-वस्तुओं और आवश्यकता-सामग्री का उपयोग करें:


लेआउट में तत्व केंद्रित समस्या को हल करने के ये सबसे सामान्य तरीके हैं।