CSS کے ساتھ Div الائنمنٹ میں مہارت حاصل کرنا
CSS میں عناصر کو افقی طور پر مرکز کرنا ایک عام کام ہے جس کا سامنا ویب ڈویلپرز کو ہوتا ہے۔ چاہے یہ ایک بٹن، ایک تصویر، یا ایک div کو سیدھ میں کر رہا ہو، کامل سیدھ کو حاصل کرنا بعض اوقات مشکل ہو سکتا ہے۔ اس گائیڈ میں، ہم افقی طور پر a کو مرکز کرنے کے مختلف طریقے تلاش کریں گے۔
ان تکنیکوں کو سمجھ کر اور ان کا اطلاق کرکے، آپ اس بات کو یقینی بنا سکتے ہیں کہ آپ کے ویب عناصر بالکل وہی جگہ ہیں جہاں آپ انہیں چاہتے ہیں۔ ہم مختلف طریقوں کا احاطہ کریں گے، بشمول فلیکس باکس، گرڈ، اور روایتی طریقے، آپ کو اس ضروری CSS مہارت کی جامع تفہیم فراہم کرنے کے لیے۔
| کمانڈ | تفصیل |
|---|---|
| display: flex; | فلیکس کنٹینر کی وضاحت کرتا ہے اور فلیکس باکس لے آؤٹ کو فعال کرتا ہے۔ |
| justify-content: center; | ایک فلیکس کنٹینر کے اندر اشیاء کو افقی طور پر مرکز کرتا ہے۔ |
| align-items: center; | ایک فلیکس کنٹینر کے اندر اشیاء کو عمودی طور پر مرکز کرتا ہے۔ |
| place-items: center; | ایک گرڈ کنٹینر میں اشیاء کو افقی اور عمودی طور پر مرکز کرتا ہے۔ |
| transform: translate(-50%, -50%); | کسی عنصر کو اس کی اپنی چوڑائی اور اونچائی کا 50% منتقل کرتا ہے تاکہ اسے مرکز میں لے جائے۔ |
| position: absolute; | کسی عنصر کو اس کے قریب ترین پوزیشن والے آباؤ اجداد کے نسبت رکھتا ہے۔ |
| top: 50%; | ایک عنصر کو اس کے شامل عنصر کے اوپری حصے سے 50% پوزیشن میں رکھتا ہے۔ |
| left: 50%; | ایک عنصر کو اس کے شامل عنصر کے بائیں سے 50% پوزیشن میں رکھتا ہے۔ |
Flexbox، گرڈ، اور روایتی CSS کے ساتھ عناصر کو مرکز کرنا
پہلا اسکرپٹ یہ ظاہر کرتا ہے کہ a کو کیسے مرکز کیا جائے۔
دوسرے اسکرپٹ میں، ہم استعمال کرتے ہیں۔ CSS Grid اسی طرح کے نتائج حاصل کرنے کے لئے. درخواست دے کر display: grid; پیرنٹ کنٹینر اور place-items: center;، چائلڈ عناصر افقی اور عمودی دونوں طرف مرکوز ہیں۔ یہ طریقہ خاص طور پر گرڈ پر مبنی ترتیب کے لیے مفید ہے۔ آخر میں، روایتی طریقہ ترتیب میں شامل ہے position: absolute; بچے کے عنصر اور استعمال پر top: 50%; اور left: 50%; کے ساتھ transform: translate(-50%, -50%); اسے والدین کے اندر مرکز کرنے کے لیے۔ یہ نقطہ نظر مقررہ سائز کے عناصر کے لیے موثر ہے۔
ایک Div کو افقی طور پر مرکز کرنے کے لیے Flexbox کا استعمال کرنا
Flexbox کے ساتھ HTML اور CSS
<!DOCTYPE html><html><head><title>Flexbox Centering</title><style>#outer {display: flex;justify-content: center;align-items: center;height: 100vh;border: 1px solid black;}#inner {padding: 20px;background-color: lightblue;border: 1px solid blue;}</style></head><body><div id="outer"><div id="inner">Foo foo</div></div></body></html>
CSS گرڈ کے ساتھ ایک Div کو مرکز کرنا
گرڈ لے آؤٹ کے ساتھ ایچ ٹی ایم ایل اور سی ایس ایس
<!DOCTYPE html><html><head><title>Grid Centering</title><style>#outer {display: grid;place-items: center;height: 100vh;border: 1px solid black;}#inner {padding: 20px;background-color: lightgreen;border: 1px solid green;}</style></head><body><div id="outer"><div id="inner">Foo foo</div></div></body></html>
CSS کے ساتھ مرکز کرنے کا روایتی طریقہ
مارجن آٹو کے ساتھ ایچ ٹی ایم ایل اور سی ایس ایس
<!DOCTYPE html><html><head><title>Traditional Centering</title><style>#outer {width: 100%;height: 100vh;border: 1px solid black;position: relative;}#inner {width: 50px;padding: 20px;background-color: lightcoral;border: 1px solid red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head><body><div id="outer"><div id="inner">Foo foo</div></div></body></html>
مرکزی عناصر کے لیے جدید تکنیک
کنٹینر کے اندر عناصر کو افقی طور پر مرکز کرنے کا ایک اور طریقہ استعمال کرنا شامل ہے۔ text-align: center; جائیداد یہ طریقہ خاص طور پر ان لائن بلاک یا ان لائن عناصر کے لیے موثر ہے۔ درخواست دے کر text-align: center; پیرنٹ کنٹینر پر، تمام چائلڈ عناصر کو افقی طور پر مرکز کیا جائے گا۔ تاہم، یہ طریقہ بلاک سطح کے عناصر کے لیے کام نہیں کرتا جب تک کہ وہ ان لائن بلاک میں تبدیل نہ ہوں۔
اس کے علاوہ، آپ استعمال کر سکتے ہیں margin: auto; بلاک سطح کے عناصر کو مرکز کرنے کے لیے پراپرٹی۔ کسی عنصر کے بائیں اور دائیں مارجن کو آٹو پر سیٹ کر کے، آپ اسے اس کے بنیادی کنٹینر کے اندر افقی طور پر مرکز کر سکتے ہیں۔ یہ تکنیک آسان ہے اور مقررہ چوڑائی والے عناصر کے لیے اچھی طرح کام کرتی ہے۔ ان طریقوں کو جدید CSS لے آؤٹ تکنیکوں جیسے Flexbox اور Grid کے ساتھ ملانا عناصر کو ضرورت کے مطابق درست طریقے سے ترتیب دینے کے لیے ایک جامع ٹول کٹ فراہم کرتا ہے۔
مرکزی عناصر کے بارے میں عام سوالات اور جوابات
- میں ایک ان لائن عنصر کو کیسے مرکز کروں؟
- استعمال کریں۔ text-align: center; پیرنٹ کنٹینر پر ان لائن عناصر کو مرکز کرنے کے لیے۔
- کیا میں مارجن: auto; ایک بلاک عنصر کو مرکز کرنے کے لئے؟
- جی ہاں، ترتیب margin: auto; بائیں اور دائیں طرف ایک بلاک عنصر کو مرکز کرے گا۔
- سینٹرنگ کے لیے فلیکس باکس اور گرڈ میں کیا فرق ہے؟
- Flexbox ایک جہتی ترتیب کے لئے استعمال کیا جاتا ہے، جبکہ Grid دو جہتی ترتیب کے لیے ہے۔
- میں سی ایس ایس کے ساتھ فکسڈ چوڑائی والے عنصر کو کس طرح سنٹر کروں؟
- استعمال کریں۔ margin: auto; یا position: absolute; کے ساتھ transform: translate(-50%, -50%);
- کیا میں Flexbox کے ساتھ عناصر کو عمودی طور پر مرکز کر سکتا ہوں؟
- جی ہاں، استعمال کریں align-items: center; ایک فلیکس کنٹینر میں عمودی طور پر عناصر کو درمیان میں رکھیں۔
- متن سیدھ کرتا ہے: center; بلاک عناصر کے لیے کام کرتے ہیں؟
- نہیں، text-align: center; صرف ان لائن یا ان لائن بلاک عناصر کے لیے کام کرتا ہے۔
- میں کنٹینر میں ایک سے زیادہ عناصر کو کیسے مرکز کروں؟
- استعمال کریں۔ display: flex; کے ساتھ justify-content: center; اور align-items: center;
- جگہ کی اشیاء کیا ہے: مرکز؛ گرڈ میں؟
- place-items: center; ایک گرڈ کنٹینر میں اشیاء کو افقی اور عمودی طور پر مرکز کرتا ہے۔
- کیا فلیکس باکس یا گرڈ کے بغیر عناصر کو مرکز کرنا ممکن ہے؟
- جی ہاں، جیسے طریقوں کا استعمال کرتے ہوئے margin: auto;، text-align: center;، یا position: absolute; عناصر کو بھی مرکز بنا سکتے ہیں۔
سی ایس ایس سینٹرنگ تکنیکوں کو لپیٹنا
مختلف CSS طریقوں کا استعمال کرتے ہوئے عناصر کو افقی طور پر مرکز کرنے کے طریقے کو سمجھنا بصری طور پر دلکش ویب لے آؤٹ بنانے کے لیے ضروری ہے۔ جیسی تکنیکوں میں مہارت حاصل کرکے Flexbox، Grid، اور traditional CSS خصوصیات، ڈویلپرز اس بات کو یقینی بنا سکتے ہیں کہ ان کے ڈیزائن فنکشنل اور جمالیاتی لحاظ سے خوشنما ہوں۔ ان طریقوں کے ساتھ تجربہ کرنے سے CSS کی صلاحیتوں کی گہری سمجھ حاصل ہوگی۔