कोडलैब (कोड बनाना सीखना): सीएसएस में सेंटर देना
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
इस कोडलैब से, आपको सीएसएस में फ़ोकस करने का अपना पसंदीदा तरीका शेयर करने और उसे दिखाने में मदद मिलती है.
सीएसएस में फ़ोकस करने के मेरे पांच पसंदीदा तरीकों के बारे में जानने के लिए, मेरी ब्लॉग पोस्ट सीएसएस में सेंटरिंग देखें. या यह वीडियो देखें!
सेटअप
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
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 चरण में बनाया गया कस्टम सिलेक्टर दें.
- अपनी ग्लिचमुझे ट्वीट करें और मैं इसे ब्लॉग पोस्ट में शामिल कर दूंगी!
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2020-12-16 (UTC) को अपडेट किया गया.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"वह जानकारी मौजूद नहीं है जो मुझे चाहिए"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"बहुत मुश्किल है / बहुत सारे चरण हैं"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"पुराना"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"अनुवाद से जुड़ी समस्या"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"सैंपल / कोड से जुड़ी समस्या"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"अन्य"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"समझने में आसान है"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"मेरी समस्या हल हो गई"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"अन्य"
}]