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

एडम आर्गील

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में इस ग्लिच को खोलें.

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

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

सेटअप

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. अपनी ग्लिचमुझे ट्वीट करें और मैं इसे ब्लॉग पोस्ट में शामिल कर दूंगी!