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

عمودی سینٹرنگ کے لیے اعلی درجے کی CSS تکنیک

تیسرے اسکرپٹ میں، ہم ٹیبل ڈسپلے کا طریقہ استعمال کرتے ہیں۔ ترتیب display: table; کنٹینر پر اور display: table-cell; کے ساتھ تخلیق کردہ ایک چھدم عنصر پر ::before ہمیں استعمال کرنے کی اجازت دیتا ہے۔ vertical-align: middle; جائیداد یہ طریقہ ٹیبل سیلز کے رویے کی نقل کرتا ہے، جس سے مواد کو عمودی طور پر مرکز بنانا ممکن ہوتا ہے۔ اگرچہ یہ نقطہ نظر جدید ویب ڈیزائن میں کم استعمال ہوتا ہے، لیکن یہ پرانے براؤزرز کے ساتھ مطابقت کو برقرار رکھنے یا میراثی کوڈ سے نمٹنے کے لیے مفید ہو سکتا ہے۔ یہ نئے لے آؤٹ سسٹمز پر انحصار کیے بغیر مواد کو سینٹر کرنے کا ایک قابل اعتماد طریقہ فراہم کرتا ہے۔

چوتھی اسکرپٹ کی مثال استعمال کرتی ہے۔ line-height جائیداد ترتیب دے کر line-height کنٹینر کی اونچائی کے برابر، متن عمودی طور پر مرکز میں ہے. یہ تکنیک سنگل لائن ٹیکسٹ کے لیے سیدھی اور موثر ہے۔ تاہم، یہ ملٹی لائن ٹیکسٹ یا ڈائنامک مواد کے لیے موزوں نہیں ہو سکتا جہاں کنٹینر کی اونچائی تبدیل ہو سکتی ہے۔ اپنی حدود کے باوجود، line-height سادہ منظرناموں میں متن کو عمودی طور پر مرکز کرنے کا طریقہ ایک تیز اور آسان حل ہے۔

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

سی ایس ایس فلیکس باکس

#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>

سی ایس ایس میں عمودی مرکز کے بارے میں عام سوالات

1. div میں متن کو عمودی طور پر مرکز کرنے کا آسان ترین طریقہ کیا ہے؟
2. استعمال کرنا display: flex; کے ساتھ justify-content: center; اور align-items: center; اکثر سب سے آسان اور سب سے مؤثر طریقہ ہے.
3. آپ پرانے براؤزرز میں متن کو عمودی طور پر کیسے مرکوز کرتے ہیں؟
4. کے ساتھ ٹیبل ڈسپلے کا طریقہ استعمال کرنا display: table; اور vertical-align: middle; پرانے براؤزرز میں عمودی سینٹرنگ حاصل کرنے میں مدد مل سکتی ہے۔
5. کیا سی ایس ایس گرڈ کو متن کو عمودی طور پر سینٹر کرنے کے لیے استعمال کیا جا سکتا ہے؟
6. جی ہاں، CSS گرڈ کا استعمال کرتے ہوئے متن کو عمودی طور پر سینٹر کر سکتا ہے۔ display: grid; اور place-items: center;.
7. کیا عمودی طور پر کثیر لائن متن کو مرکز کرنا ممکن ہے؟
8. جی ہاں، Flexbox یا CSS گرڈ کا استعمال آسانی سے ایک کنٹینر کے اندر کثیر لائن متن کو عمودی طور پر مرکز کر سکتا ہے۔
9. آپ معلوم کنٹینر کی اونچائی کے ساتھ متن کو عمودی طور پر کیسے مرکز کرتے ہیں؟
10. آپ سیٹ کر سکتے ہیں۔ line-height متن کو مؤثر طریقے سے مرکز کرتے ہوئے کنٹینر کی اونچائی سے مماثل جائیداد۔
11. اگر کنٹینر کی اونچائی متحرک ہے تو کیا ہوگا؟
12. فلیکس باکس، گرڈ، یا کا استعمال کرتے ہوئے transform پراپرٹی مستقل عمودی مرکز کو یقینی بناتی ہے، یہاں تک کہ متحرک کنٹینر کی بلندیوں کے ساتھ۔
13. کیا استعمال کرنے میں کوئی خرابیاں ہیں؟ transform: translateY(-50%);?
14. مؤثر ہونے کے باوجود، یہ والدین کے پاس ہونا ضروری ہے۔ position: relative; اور Flexbox یا Grid کے مقابلے میں لاگو کرنے کے لیے قدرے پیچیدہ ہو سکتا ہے۔
15. آپ جوابی ڈیزائن میں متن کو عمودی طور پر کیسے مرکوز کرتے ہیں؟
16. Flexbox یا CSS گرڈ کا استعمال ریسپانسیو ڈیزائنز کے لیے بہت زیادہ تجویز کیا جاتا ہے، کیونکہ وہ مختلف اسکرین کے سائز اور واقفیت کے مطابق ہوتے ہیں۔

عمودی مرکز کے بارے میں حتمی خیالات

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