ویب صفحات کو ڈیزائن کرتے وقت، ڈویلپر مختلف اجزاء شامل کر سکتے ہیں، بشمول تصاویر، متن، میزیں اور دیگر۔ مزید برآں، متن کو ایک سے زیادہ CSS خصوصیات کا استعمال کرتے ہوئے ایک div میں مرکز میں منسلک کیا جا سکتا ہے۔ متن کو افقی طور پر مرکز کرنے کا سب سے مشہور طریقہ یہ ہے کہ ' متن سیدھ ' وصف. مزید یہ کہ آپ ' لکیر کی اونچائی 'اور' عمودی سیدھ متن کو عمودی طور پر سیدھ میں کرنے کے لیے خصوصیات۔
یہ پوسٹ متن کو عمودی اور افقی طور پر تقسیم کے اندر مرکز کرنے کا طریقہ بیان کرے گی۔
ایک div کے اندر متن کو افقی طور پر کیسے سنٹر کریں؟
متن کو ایک div کے اندر افقی طور پر مرکز کرنے کے لیے، دیئے گئے طریقہ کار کو چیک کریں۔
مرحلہ 1: ایک div کنٹینر بنائیں
ابتدائی طور پر، 'کی مدد سے ایک div کنٹینر بنائیں اب، کی مدد سے div کنٹینر تک رسائی حاصل کریں۔ آئی ڈی 'انتخابی نام کے ساتھ سلیکٹر' # اور درج ذیل سی ایس ایس خصوصیات کو لاگو کریں: یہ مشاہدہ کیا جا سکتا ہے کہ ہم نے تخلیق کردہ div کے اندر کامیابی سے منسلک متن کو افقی طور پر مرکز کیا ہے: متن کو عمودی طور پر div کنٹینر کے اندر بیچنے کے لیے، فراہم کردہ ہدایات پر عمل کریں۔ مرحلہ 1: div کنٹینر تک رسائی حاصل کریں۔ سب سے پہلے، بنائے گئے div کنٹینر تک رسائی حاصل کریں۔ مرحلہ 2: مرکزی متن پر عمودی طور پر CSS خصوصیات کا اطلاق کریں۔ اس کے بعد، ذیل میں درج سی ایس ایس خصوصیات کو ایک div میں عمودی طور پر بیچ میں متن پر لاگو کریں: آؤٹ پٹ متن کو ایک div کے اندر عمودی اور افقی طور پر مرکز کرنے کے لیے، پہلے
< div آئی ڈی = 'سیدھ میں آنے والا مواد' >
Linuxhint بہترین ویب سائٹس میں سے ایک ہے۔ کے لیے مواد کی تخلیق.
div >
آؤٹ پٹ
مرحلہ 2: div کنٹینر کو سینٹر الائن ٹیکسٹ تک رسائی حاصل کریں۔
چوڑائی: 80 % ;
مارجن: 0 آٹو
پیڈنگ: 20px؛
پس منظر: #c8edf3;
متن سیدھ: مرکز؛
رنگ: آر جی بی ( 49 , پندرہ , 240 ) ;
}
یہاں:
متن کو عمودی طور پر div کے اندر کیسے سنٹر کریں؟
ڈسپلے: ٹیبل سیل؛
چوڑائی: 300px؛
اونچائی: 150px؛
پیڈنگ: 10px؛
رنگ: نیلا؛
پس منظر کا رنگ: rgb ( 248 , 215 , 166 ) ;
بارڈر: 3px ڈیشڈ #f09d03;
عمودی سیدھ: درمیانی؛
}
مندرجہ بالا کوڈ کے ٹکڑوں کے مطابق:
آپ نے متن کو کنٹینر کے اندر عمودی اور افقی دونوں طریقوں سے مرکز کرنے کے مکمل طریقہ کار کے بارے میں جان لیا ہے۔ نتیجہ