سی ایس ایس استعمال کرنے والے تمام براؤزرز کے لیے عمودی طور پر ایک div عنصر کو کیسے سنٹر کریں۔

ویب ڈویلپمنٹ میں، عنصر کی ترتیب کو صحیح طریقے سے بنانا بہت ضروری ہے۔ تاہم، بہت سی سی ایس ایس خصوصیات، جیسے CSS3 لچکدار باکس، ویب صفحات اور HTML عناصر کی ترتیب کو ایڈجسٹ کرنے کے لیے مفید ہیں۔ لچکدار باکس کا استعمال ویب صفحات اور ایپلیکیشنز کو تکراری انداز میں ترتیب دینے کے لیے کیا جاتا ہے۔ یہ Flexbox موڈ پیچیدہ ویب صفحات اور ایپلیکیشنز کے لیے لے آؤٹ بنانے میں مدد کرتا ہے۔

یہ پوسٹ آپ کی رہنمائی کرے گی کہ سی ایس ایس کو عمودی طور پر استعمال کرنے والے تمام براؤزرز کے لیے div عنصر کو کیسے مرکز بنایا جائے۔

سی ایس ایس کا استعمال کرتے ہوئے div عنصر کو کیسے سیدھا کریں؟

div عنصر کو ڈسپلے پراپرٹی کا استعمال کرکے عمودی طور پر منسلک کیا جاسکتا ہے ' فلیکس 'سی ایس ایس کے ساتھ' سیدھ میں آنے والی اشیاء 'جائیداد اور' جواز فراہم کرنا ' جائیداد. 'لائن آئٹمز' کی خاصیت عنصر کو عمودی طور پر سیدھ میں کرتی ہے، اور 'جائز مواد' کی خاصیت مواد کو افقی طور پر سیدھ میں کرتی ہے۔

مثال: سی ایس ایس کے ساتھ ایک div عنصر کو عمودی طور پر مرکز کیسے بنایا جائے؟

ایچ ٹی ایم ایل میں، سب سے پہلے، ایک شامل کریں

'عنصر اور اسے کلاس تفویض کریں' مرکزی مواد ' '

' ٹیگز کے درمیان، ایک شامل کریں مندرجہ ذیل صفات کے ساتھ عنصر:

---

---

• ' src ” انتساب کا استعمال تصویر کے URL کی وضاحت کے لیے کیا جاتا ہے۔
• ' سب کچھ ” انتساب کچھ متن کی وضاحت کرتا ہے جو لوڈ ہونے میں ناکام ہونے کی صورت میں تصویر کی جگہ پر ظاہر ہوگا۔
• ' چوڑائی ” انتساب تصویر کی چوڑائی کو ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے۔
• پھر، شامل کریں '

  صفحہ پر پیراگراف کو سرایت کرنے کے لیے عنصر۔

یہاں HTML کوڈ ہے:

< div کلاس = 'مرکزی مواد' >
< img src = '/images/laptop-notepad.jpg' سب کچھ = 'نوٹ پیڈ اور قلم کے ساتھ لیپ ٹاپ' چوڑائی = '300' >
< ص > لیپ ٹاپ ایک پورٹیبل کمپیوٹر ہے جسے بھی جانا جاتا ہے۔ کے طور پر ایک نوٹ بک کمپیوٹر۔ ص >
div >

CSS میں، ہم div میں اسٹائلنگ کی کئی خصوصیات بیان کریں گے۔

طرز 'مرکزی مواد' کلاس

.مرکزی مواد {
اونچائی: پچاس % ;
پس منظر کا رنگ: #46C2CB;
فونٹ سائز: 24px؛
پیڈنگ: 10px؛
}

درج ذیل سی ایس ایس خصوصیات کی وضاحت ' مرکزی مواد کلاس:

• ' اونچائی ” پراپرٹی کو
  کنٹینر کی اونچائی کو ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے۔
• ' پس منظر کا رنگ ' عنصر کے پس منظر کے رنگ کی وضاحت کرتا ہے۔
• ' حرف کا سائز ' عنصر کے فونٹ کا سائز بتاتا ہے۔
• ' بھرتی 'پراپرٹی عنصر کے مواد کے ارد گرد جگہ متعین کرتی ہے۔

آؤٹ پٹ سے، آپ دیکھ سکتے ہیں کہ div عنصر کا مواد مرکز میں نہیں ہے:

آئیے سی ایس ایس پراپرٹیز کو لاگو کرنے کے لیے آگے بڑھیں جو مرکز میں مدد کرتی ہیں۔

عمودی طور پر عنصر۔ ان خصوصیات کو کلاس میں شامل کریں ' مرکزی مواد ' جو

عنصر تک رسائی کے لیے استعمال ہوتے ہیں:

ڈسپلے: فلیکس ;
align-items: مرکز؛

تفصیل یہ ہے:

• ' ڈسپلے 'جائیداد' فلیکس div لے آؤٹ کو اس کے عنصر کے لیے لچکدار بنانے کے لیے استعمال کیا جاتا ہے۔
• ' سیدھ میں آنے والی اشیاء 'سی ایس ایس پراپرٹی کو بطور سیٹ کیا گیا ہے' مرکز ”، جو div عناصر کو عمودی طور پر سیدھ میں کر دے گا۔

آؤٹ پٹ

آپ نے سیکھا ہے کہ سی ایس ایس استعمال کرنے والے تمام براؤزرز کے لیے عمودی طور پر ایک div عنصر کو کس طرح مرکز کرنا ہے۔

نتیجہ

عمودی طور پر ایک div عنصر کو مرکز کرنے کے لئے، CSS ' ڈسپلے 'جائیداد کے ساتھ استعمال کیا جاتا ہے' فلیکس ' قدر. یہ قدر

کنٹینر کو اس کے عناصر کے لیے لچکدار بناتی ہے۔ div عنصر کو عمودی طور پر سیدھ میں کرنے کے لیے، ایڈجسٹ کریں ' سیدھ میں آنے والی اشیاء 'پراپرٹی اور اسے تفویض کریں' مرکز ' قدر. اس بلاگ نے آپ کو دکھایا ہے کہ تمام براؤزرز میں div عناصر کو عمودی طور پر سینٹر کرنے کے لیے CSS کا استعمال کیسے کریں۔