कोडलैब (कोड बनाना सीखना): सीएसएस में सेंटर देना

इस कोडलैब की मदद से, आपको फ़ोकस करने का अपना पसंदीदा तरीका शेयर करने और दिखाने का विकल्प मिलता है सीएसएस.

इनके बारे में जानने के लिए, मेरी ब्लॉग पोस्ट सीएसएस में सेंटरिंग देखें में सेंटर चलाने के मेरे पसंदीदा तरीके हैं. या यह वीडियो देखें!

सेटअप

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. app/index.html खोलें
  3. line 23 पर, /* your centering CSS here /* को अपनी सीएसएस से बदलें
  4. (ज़रूरी नहीं) सेंटरिंग तकनीक को नाम दें और <h1> में टेक्स्ट बदलें

स्टाइल

  1. app/css/ फ़ोल्डर में नई फ़ाइल बनाएं
  2. सेंटरिंग सलूशन को होल्ड करने के लिए सिलेक्टर बनाएं, जैसे कि .turbo-center या [floaty-mcfloat]
  3. उस नए सिलेक्टर में, सेंटरिंग तकनीक लिखें (इसे बेझिझक app/css/ में उदाहरण के तौर पर)
  4. (ज़रूरी नहीं) "सहायता के लिए कोई स्टाइल" लिखें इससे हमें पता चलता है कि सेंटरिंग को सपोर्ट करने के लिए स्टाइल
  5. app/css/index.css खोलें और स्क्रीन पर सबसे नीचे अपनी नई फ़ाइल इंपोर्ट करें

पूरी जानकारी इकट्ठा करें

  1. app/index.html को फिर से खोलें
  2. <article> ढूंढें और इसे अपना कस्टम सिलेक्टर दें, जो आपने चरण #2 में बनाया था पिछला सेक्शन देखें.
  3. अपनी Glitch मुझे ट्वीट करें और मैं इसे इस पर दिखा दूंगा ब्लॉग पोस्ट!