कोडलैब (कोड बनाना सीखना): सीएसएस में सेंटर देना
bookmark_border bookmark
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
इस पेज पर, यह जानकारी उपलब्ध है सेटअप
इस कोडलैब को फ़ॉलो करने के लिए, इस Glitch को दूसरे टैब में खोलें.
इस कोडलैब की मदद से, आपको फ़ोकस करने का अपना पसंदीदा तरीका शेयर करने और दिखाने का विकल्प मिलता है
सीएसएस.
इनके बारे में जानने के लिए, मेरी ब्लॉग पोस्ट सीएसएस में सेंटरिंग देखें
में सेंटर चलाने के मेरे पसंदीदा तरीके हैं. या यह वीडियो देखें!
VIDEO
सेटअप
प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
app/index.html
खोलें
line 23
पर, /* your centering CSS here /*
को अपनी सीएसएस से बदलें
(ज़रूरी नहीं) सेंटरिंग तकनीक को नाम दें और <h1>
में टेक्स्ट बदलें
स्टाइल
app/css/
फ़ोल्डर में नई फ़ाइल बनाएं
सेंटरिंग सलूशन को होल्ड करने के लिए सिलेक्टर बनाएं, जैसे कि .turbo-center
या
[floaty-mcfloat]
उस नए सिलेक्टर में, सेंटरिंग तकनीक लिखें (इसे बेझिझक
app/css/
में उदाहरण के तौर पर)
(ज़रूरी नहीं) "सहायता के लिए कोई स्टाइल" लिखें इससे हमें पता चलता है कि
सेंटरिंग को सपोर्ट करने के लिए स्टाइल
app/css/index.css
खोलें और स्क्रीन पर सबसे नीचे अपनी नई फ़ाइल इंपोर्ट करें
पूरी जानकारी इकट्ठा करें
app/index.html
को फिर से खोलें
<article>
ढूंढें और इसे अपना कस्टम सिलेक्टर दें, जो आपने चरण #2 में बनाया था
पिछला सेक्शन देखें.
अपनी Glitch मुझे ट्वीट करें और मैं इसे इस पर दिखा दूंगा
ब्लॉग पोस्ट!
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2020-12-16 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2020-12-16 (UTC) को अपडेट किया गया."],[],[]]