CSS کا استعمال کرتے ہوئے Div میں متن کو عمودی طور پر مرکز کرنا

دوسری اسکرپٹ کی مثال CSS گرڈ لے آؤٹ کو استعمال کرکے استعمال کرتی ہے۔ . ترتیب سے ، متن گرڈ کنٹینر کے اندر افقی اور عمودی طور پر مرکز میں ہے۔ CSS گرڈ روایتی طریقوں کے مقابلے ویب لے آؤٹ ڈیزائن کرنے کے لیے زیادہ طاقتور اور لچکدار نظام پیش کرتا ہے۔ یہ آسانی کے ساتھ پیچیدہ، ذمہ دار ڈیزائن بنانے کی صلاحیت فراہم کرتا ہے۔ دی کمانڈ عمودی اور افقی سینٹرنگ حاصل کرنے، کوڈ کو آسان بنانے اور پڑھنے کی اہلیت کو بہتر بنانے کا ایک مختصر طریقہ ہے۔

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

عمودی سینٹرنگ کے لیے سی ایس ایس ٹرانسفارم کی تلاش

a کے اندر متن کو عمودی طور پر مرکز کرنے کا ایک اور موثر طریقہ CSS استعمال کر رہا ہے۔ جائیداد ملا کر کے ساتھ transform: translateY(-50%);، ہم عین مطابق عمودی سیدھ حاصل کر سکتے ہیں۔ سب سے پہلے، پر مقرر ہے ایک حوالہ نقطہ کے طور پر کام کرنا۔ پھر، ایک بچہ عنصر کے ساتھ پیرنٹ کنٹینر کے سب سے اوپر 50% پر واقع ہے۔ آخر میں، درخواست دینا transform: translateY(-50%); عنصر کو اس کی اپنی اونچائی کے نصف تک اوپر لے جاتا ہے، بالکل عمودی طور پر مرکز میں۔

یہ طریقہ بہت زیادہ لچک فراہم کرتا ہے اور متن اور تصاویر سمیت مختلف قسم کے مواد کے لیے اچھا کام کرتا ہے۔ متحرک مواد سے نمٹتے وقت یہ خاص طور پر مفید ہے، کیونکہ مرکزی اثر مواد کی اونچائی سے قطع نظر مستقل رہتا ہے۔ مزید برآں، امتزاج دیگر سی ایس ایس خصوصیات کے ساتھ زیادہ پیچیدہ اور تخلیقی ترتیب ڈیزائن کی اجازت دیتا ہے۔ اگرچہ یہ نقطہ نظر Flexbox یا Grid کے مقابلے میں تھوڑا زیادہ کوڈ کی ضرورت ہے، یہ عناصر کی پوزیشننگ پر قطعی کنٹرول پیش کرتا ہے۔

1. div میں متن کو عمودی طور پر مرکز کرنے کا آسان ترین طریقہ کیا ہے؟
2. استعمال کرنا کے ساتھ اور اکثر سب سے آسان اور سب سے مؤثر طریقہ ہے.
3. آپ پرانے براؤزرز میں متن کو عمودی طور پر کیسے مرکوز کرتے ہیں؟
4. کے ساتھ ٹیبل ڈسپلے کا طریقہ استعمال کرنا اور پرانے براؤزرز میں عمودی سینٹرنگ حاصل کرنے میں مدد مل سکتی ہے۔
5. کیا سی ایس ایس گرڈ کو متن کو عمودی طور پر سینٹر کرنے کے لیے استعمال کیا جا سکتا ہے؟
6. جی ہاں، CSS گرڈ کا استعمال کرتے ہوئے متن کو عمودی طور پر سینٹر کر سکتا ہے۔ اور .
7. کیا عمودی طور پر کثیر لائن متن کو مرکز کرنا ممکن ہے؟
8. جی ہاں، Flexbox یا CSS گرڈ کا استعمال آسانی سے ایک کنٹینر کے اندر کثیر لائن متن کو عمودی طور پر مرکز کر سکتا ہے۔
9. آپ معلوم کنٹینر کی اونچائی کے ساتھ متن کو عمودی طور پر کیسے مرکز کرتے ہیں؟
10. آپ سیٹ کر سکتے ہیں۔ متن کو مؤثر طریقے سے مرکز کرتے ہوئے کنٹینر کی اونچائی سے مماثل جائیداد۔
11. اگر کنٹینر کی اونچائی متحرک ہے تو کیا ہوگا؟
12. فلیکس باکس، گرڈ، یا کا استعمال کرتے ہوئے پراپرٹی مستقل عمودی مرکز کو یقینی بناتی ہے، یہاں تک کہ متحرک کنٹینر کی بلندیوں کے ساتھ۔
13. کیا استعمال کرنے میں کوئی خرابیاں ہیں؟ ?
14. مؤثر ہونے کے باوجود، یہ والدین کے پاس ہونا ضروری ہے۔ اور Flexbox یا Grid کے مقابلے میں لاگو کرنے کے لیے قدرے پیچیدہ ہو سکتا ہے۔
15. آپ جوابی ڈیزائن میں متن کو عمودی طور پر کیسے مرکوز کرتے ہیں؟
16. Flexbox یا CSS گرڈ کا استعمال ریسپانسیو ڈیزائنز کے لیے بہت زیادہ تجویز کیا جاتا ہے، کیونکہ وہ مختلف اسکرین کے سائز اور واقفیت کے مطابق ہوتے ہیں۔

ایک div کے اندر متن کے عمودی مرکز کو حاصل کرنا کئی موثر طریقوں سے پورا کیا جا سکتا ہے۔ Flexbox اور Grid جیسی جدید تکنیک سب سے زیادہ لچک اور نفاذ میں آسانی فراہم کرتی ہے۔ پرانے طریقے، جیسے ٹیبل ڈسپلے اور لائن کی اونچائی، اب بھی مخصوص معاملات میں کارآمد ثابت ہو سکتے ہیں۔ ان مختلف طریقوں کو سمجھنے اور لاگو کرنے سے، ڈویلپرز اس بات کو یقینی بنا سکتے ہیں کہ ان کا مواد مختلف آلات اور براؤزرز میں بصری طور پر دلکش اور مناسب طریقے سے منسلک ہے۔