ويب سائيٽون ٺاهڻ جڏهن تصويرون، ٽيڪسٽ، ۽ بلاڪ عناصر
جيڪڏهن توهان ويب سائيٽون ٺاهي رهيا آهيو، هڪ عام عام چئنڪن مان توهان کي ماسٽر ڪرڻ جي ضرورت هوندي آهي ته برائوزر ونڊو ۾ شيون ڪيئن سينٽرول هوندي. اهو انهي صفحي تي هڪ تصوير کي مرڪز ڪري سگهي ٿي، يا اهو مرڪز ٿي سگهي ٿو متن کي درست ڪرڻ وانگر ڊزائن جي حصي جي طور تي.
سنجيده تصويرون جي اس بصري نظر يا متن يا ان جي سڄي ويب پيج کي حاصل ڪرڻ جو مناسب طريقه ڪاسسلنگ انداز شيٽ (CSS) استعمال ڪندي. مرڪز لاء سڀ کان وڌيڪ پراپرٽيسس ايس ايم ايس کان 1.0 ۾ هونديون آهن، ۽ اهي CSS3 ۽ جديد ويب برائوزر سان گڏ ڪم ڪن ٿا.
ويب ڊزائن جي ڪيترن ئي حصن وانگر، ويب پيج تي سي ايس جي مرڪز جي استعمال ڪرڻ لاء ڪيترائي طريقا آهن. اچو ته هي بصري نظر حاصل ڪرڻ لاء سي ايس استعمال ڪرڻ لاء مختلف طريقن تي نظر اچن.
HTML ۾ CSS تي سينٽرل عناصر استعمال ڪرڻ جي نظرثاني تي
سي ايس سي سان سينٽرنگ ويب ويبزائنرز لاء هڪ چيلنج ٿي سگهي ٿو ڇو ته هن هڪ بصري طرز کي حاصل ڪرڻ لاء ڪيترائي مختلف طريقا آهن. جڏهن ته طريقن جي مختلف قسمن جو سٺو يا تجربي ٿيل ويب ڊولپرز شايد اهو ڄاڻڻ گهرجي ته اهي سڀئي ٽيڪنالاجي هر عنصر تي ڪم ڪري رهيا آهن، هن کي مختلف قسم جي طريقن کان نئين ويب پروفيسر لاء سخت مشڪل ٿي سگهي ٿو. ڪجھه طريقي سان سمجهه حاصل ڪرڻ لاء بهترين ڪم ڪرڻ آهي. جئين توهان ان کي استعمال ڪرڻ شروع ڪيو ٿا، توهان سکڻ وارا ڪئين طريقي سان ڪهڙو طريقو ڪم ڪندو.
وڏي سطح تي، توهان CSS ڏانهن استعمال ڪري سگهو ٿا:
- مرڪز جو درجو
- هڪ بلاڪ سطح جي عنصر (ڊويزن وانگر)
- تصوير جو مرڪز
- عموما هڪ بلاڪ يا هڪ تصوير جو مرڪز
ڪيترائي (ڪيترائي سال) اڳ ۾، ويب ڊزائينر کي استعمال ڪري سگھن ٿا <مرڪز> تصويرون ۽ ٽيڪسٽ مرڪز کي، پر جيڪي HTML عنصر هاڻي خراب ٿي چڪو آهي ۽ هاڻي جديد ويب برائوزر ۾ ڪو به سهڪار نه آهي. ان جو مطلب آهي ته توهان هي HTML عنصر استعمال ڪرڻ کان پاسو ڪرڻ گهرجي جيڪڏهن توهان پنهنجن صفحن کي صحيح نموني ڏيکاري ۽ جديد معيار جي مطابق هجن! هن عنصر کي تباهه ڪيو ويو آهي، وڏي حصي ۾ آهي، ڇاڪاڻ ته جديد ويب سائيٽن جي جوڙجڪ ۽ انداز جي واضح الڳ ڪرڻ گهرجي. ايس اي سي ڊي ٺاهيل انداز ۾ ٺاهيل بڻائڻ لاء استعمال ٿيل آهي. ڇو ته سينٽرنگ هڪ عنصر جو هڪ بصري خاصيت آهي (ڪئين اهو ان جي مقابلي ۾ ڏسڻ ۾ اچي ٿو)، اهو انداز سي ايس ايس سان گڏ، HTML نه آهي. اهو ڇو ته هڪ سينٽرل ڊزائين ۾ <مرڪز> ٽيگ جو جديد ويب معيار جي مطابق غلط آهي. ان جي بدران، اسان جا عناصر سٺا ۽ مرڪز سان حاصل ڪرڻ لاء سي ايس تي موٽندا.
سي ايس ايس سان مرڪز سينٽر
هڪ ويب پيج تي مرڪز جو آسان ذريعو متن آهي. اهو صرف هڪ انداز جي ملڪيت آهي توهان کي اهو ڪرڻ ڪرڻ جي ضرورت آهي: ٽيڪسٽ-صف. هيٺيان سي ايس ڊي جي اسلوب وٺو، مثال طور:
سور جو نالو {متن-صفائي: مرڪز؛ }
سي ايس جي هن ليڪ سان، مرڪزي طبقي سان لکيل هر پيراگراف هن جي والدين عنصر اندر افقي طور تي لڳائي سگهندي. مثال طور، جيڪڏهن پيراگراف ڊويزن اندر هوندو هو، مطلب ته اهو ڊويزن جو ننڍڙو ٻار هو، اهو افقي طور تي
هتي هن طبقي جو هڪ مثال HTML دستاويز ۾ لاڳو ڪيو آهي:
هي متن سينٽرل آهي.
جڏهن متن جي مرڪزي ملڪيت سان متن سينٽر ڪري، ياد رکو ته اهو ان جي عنصر جي اندر اندر مرڪوز ڪيو ويندو ۽ نه ئي لازمي طور تي مڪمل صفحن جي اندر اندر داخل ٿيندي. انهي کي پڻ ياد رکون ٿا ته سينٽر جو صحيح متن مواد جي وڏي بلاڪ لاء پڙهڻ لاء ڏکيو ٿي سگهي ٿو، تنهنڪري هن انداز سان اسپوري طور استعمال ڪريو. جڏهن مرڪزي مضمون يا ٻئي مواد لاء ٽيڪسٽ جي ٽيڪسٽ، ٽئڪس ٽيڪسٽ وانگر ننڍا ننڍا وڏا، پڙهڻ وارا ۽ سٺيون پڙهڻ آسان آهن جڏهن ته سينٽرل، پر ڪائنات جي وڏن بلاڪ، مڪمل مضمون وانگر، ڪمائڻ لاء مشڪل هونديون. ثابت ٿيو. ياد رکو، پڙهڻ هميشه هميشه جي ويب سائيٽ تي ٽيڪسٽ هوندي آهي!
CSS سان مواد جو سينٽرنگ بلاڪ
توهان جي صفحي تي اهڙيون عناصر آهن جن جي چوٿين وضاحت ڪئي وئي آهي ۽ هڪ بلاڪ سطح جي عنصر طور قائم ڪيل آهن. گهڻو وقت، اهي بلاڪ HTML استعمال ڪري رهيا آهن. div عنصر. سي ايس سي سان بلاڪ کي مرڪز ڪرڻ جو سڀ کان وڏو طريقو آهي ته خود ڪار ڏانهن بائیں ۽ ساڄي طرف ٻنهي کي مقرر ڪرڻ. هتي ڊويزن لاء سي ايس ايس آهي جيڪا ان تي لاڳو ٿيل "سينٽر" جي صنف جي خاصيت آهي.
div.center {
حاڪمن: 0 آٽو؛
چوٿون: 80em؛
}
حاڪمن جي ملڪيت لاء هي سي ايس جي شارٽينڊن 0 جي قيمت کي مٿين ۽ هيٺين ماپين مقرر ڪري ڇڏي، جڏهن ته کاٻي ۽ صحيح "آٽو" استعمال ڪري سگهندي. اهو لازمي طور ڪنهن به جڳهه آهي جيڪا دستياب ٿئي ٿي ۽ ان کي ويجهڙائي واري ونڊ جي ٻنهي طرفن کي، مؤثر طور تي صفحي تي عنصر کي مرڪز بڻائي ٿو.
هتي اهو HTML ۾ لاڳو ٿئي ٿو.
پر ان جي اندر اندر متن کي ڇڏي ويو آھي.
جيستائين توهان جو بلاڪ مقرر ڪيل چوٿون هجي، اهو پاڻ ۾ موجود عنصر اندر پاڻ سينٽر ڪندو. انهي بلاڪ ۾ موجود متن ۾ ان جي وچ ۾ نه هوندي، پر کاٻي طرف درست ڪيو ويندو. اهو ئي سبب آهي ته ٽيڪسٽ ۾ ويب برائوزرن ۾ ڊفالٽ ۾ بجاء درست قرار ڏنو ويو آهي. جيڪڏهن توهان چاهيو ته متن جو مرڪز پڻ هجي، توهان هن متن جي درجي جي ملڪيت استعمال ڪري سگهون ٿا جيڪو اسان اڳ ۾ ئي هن طريقي سان ملندڙ ڊويزن جي وچ ۾ شامل ڪيو ويو آهي.
ايس اي ايس سان سينٽرنگ تصويرون
اڪثر برائوزر اڪثر تصويرون استعمال ڪندي تصويرون ڏيکاريندي جيڪي ملڪيت جو اسان اڳ ۾ ئي پيراگراف ڏسڻ ۾ ايندا، اهو سٺو طريقو نه آهي ته ان ٽيڪنڪيڪي تي متفق آهي جيئن W3C طرفان सिफारिस गर्दैन. جيئن ته اها سفارش نه ڪئي وئي آهي، اتي هميشه اهو موقعو آهي ته برائوزر جي مستقبل جي هن نسخ کي هن طريقي کي نظر انداز ڪرڻ کان چونڊجي سگهي ٿو.
ھڪڙو تصوير سينٽر ذريعي ٺاھڻ جي بدران، توھان کي ظاھر طور تي برائوزر کي ٻڌايو ته تصوير ھڪ بلاڪ سطح عنصر آھي. اهو طريقو، توهان ان کي مرڪز ڪري سگھو ٿا جيئن توهان ڪنهن ٻئي بلاڪ ڪيو. هي ٺاهڻ لاء هي ايس ايس ڊي آهي.
img.center {
ڏيکاريو: بلاڪ؛
مارجن-کاٻو: آٽو؛
حاڪمن جو حق: آٽو؛
}
۽ ھتي ھتي آھي HTML جيڪو اھا تصوير لاء آھي جيڪو اسان کي پسند ڪيو وڃي.
توهان آن لائن سي ايس ايس ۾ استعمال ڪندي مرڪز جا مرڪز (هيٺ ڏسو)، پر اهو طريقيڪار سفارش نه ڪئي آهي ڇو ته اهو منظر شالي ۾ توهان جي HTML مارڪ اپ ۾ شامل ڪندو آهي. ياد رکو، اسان انداز ۽ انداز کي الڳ ڪرڻ چاهيو ٿا، تنهنڪري سي ايس ڊي جي شالن کي پنهنجي HTML ڪوڊ تائين شامل ڪرڻ سان گڏ ڌار ڌار ڪرڻ، ۽ اهڙي طرح، جڏهن ممڪن هجي ته ان کان بچڻ گهرجي.
عمدي طور سي ايس ايس سان مرڪزي عنصر
سينٽرنگ ايج عمري طور تي ويب ڊزائن ۾ هميشه مشڪل ٿي چڪا آهن، پر CSS3 ۾ سي ايس ڊي لچڪدار باڪس ليٽ ماڊل جي جاري ٿيڻ سان، اتي هاڻي اهو ڪرڻ جو هڪ طريقو آهي.
عمدي ترتيب واري جوڙجڪ جي مٿان مٿئين ڍڪيل افقي قطار سان. سي ايس ڊي ملڪيت عمودي قدر سان گڏ وچولي قدر سان گڏ آھي.
.vcenter {
عمارتون
}
هن طريقي جي ماتحت اهو آهي ته سڀئي برائوزر سي ايس ايس فليڪسڪس جي حمايت ڪن ٿيون، جيتوڻيڪ وڌيڪ هن نئين ايس ايس ايس ڊي ترتيب طريقي جي چوڌاري اچي رهيا آهن! حقيقت ۾، اڄ سڀني جديد جديد برائوزر هاڻي سي ايس ڊي اسلوب جي حمايت ڪن ٿيون. هن جو مطلب اهو آهي ته توهان صرف فلڪس بوڪس سان رڳو ڳڻتي گهڻو ڪري برائوزر برائوزر هوندو.
جيڪڏهن توهان پراڻن برائوزرن سان مسئلن جو مسئلو آهي، ته W3C هيٺين طريقي سان استعمال ڪندي هڪ مرڪزي ڪنٽرول ۾ توهان جي مرڪزي ٽيڪسٽ کي مشوري ڏئي ٿو:
- عناصر کي جڳھ تي مشتمل ھڪڙي عنصر، جنھن ۾ ھڪڙو ھجي
- سيٽ تي مشتمل عنصر کي گهٽ ۾ گهٽ اوچائي مقرر ڪريو.
- بيان ڪريو ته عنصر تي مشتمل ٽيبل سيل جي حيثيت سان.
- "وچولي" ڏانهن عمدي قطار کي ترتيب ڏيو
مثال طور، هتي سي ڊي آهي.
.vcenter {
اوچائي قد: 12em؛
ڏيکاريو: ٽيبل جي سيل؛
عمارتون
}
۽ ھتي آھي HTML:
هي متن باڪس ۾ عمودي طور تي مرڪز آهي.
عمارتون سينٽرنگ ۽ انٽرنيٽ ايڪسپلورر جي پراڻن ورزن
انٽرنيٽ ايڪسپلورر (IE) کي مرڪز ڪرڻ لاء ڪجهه طريقا موجود آهن ۽ پوء سانسٽي تبصرو استعمال ڪريو انهي ڪري ته صرف اهي شئيون ڏسڻ ۾ اينديون آهن، پر اهي ٿوري verbose ۽ ugly آهن. سٺو خبر اهو آهي ته Microsoft جي پراڻن نسخن جي حمايت کي ختم ڪرڻ لاء، اهي اڻڄاتل برائوزر جلد ئي ان رستي تي ٿيڻ گهرجن، ويب ويبزائن کي جديد طريقي سان استعمال ڪرڻ لاء آسان بڻائي سگھن ٿا جهڙوڪ سي ايس ايس ف्लेڪس بوڪس جيڪي سڀني سي ايس ڊي ترتيب، نه رڳو مرڪز، ويب ويب ڊزائنر لاء وڌيڪ آسان.