- Div میں تصویر کو افقی طور پر کیسے سنٹر کیا جائے؟
- مارجن پراپرٹی
- فلیکس باکس ماڈیول
- گرڈ ویو لے آؤٹ
- پوزیشن وصف
Div میں تصویر کو افقی طور پر کیسے سنٹر کیا جائے؟
ڈویلپر مارجن پراپرٹی، فلیکس باکس ماڈیول، گرڈ ویو لے آؤٹ، اور پوزیشن کی خصوصیت کو div میں افقی طور پر ایک تصویر کو سینٹر کرنے کے لیے استعمال کر سکتا ہے۔ Div ٹیگ میں تصویر کو افقی طور پر بیچ میں سیدھ میں کرنے کے لیے نیچے دی گئی گائیڈ پر عمل کریں۔
آئیے فرض کریں، ایک div ہے جس میں تصویر کو HTML فائل میں اس طرح رکھا گیا ہے:
< div کلاس = 'جڑ' >
< img src = '../book.jpg' اونچائی = 'پچاس٪' چوڑائی = 'پچاس٪' کلاس = 'تصویر' >
< / div >
تصویر کی چوڑائی اور اونچائی 50% ہو رہی ہے اور 'تصویر' کی کلاس ہے۔
مارجن پراپرٹی کا استعمال
صارف مارجن پراپرٹی کا استعمال کرتے ہوئے HTML عناصر کے ارد گرد جگہ شامل کر سکتے ہیں۔ یہ ونڈو اسکرین کا سائز تبدیل کرنے کے بعد دستیاب جگہ کے مطابق مارجن تفویض کرتا ہے۔ مثال کے طور پر، مارجن-بائیں اور دائیں کو آٹو پر سیٹ کرتا ہے، اور ڈسپلے پراپرٹی کو بلاک کرنے کے لیے سیٹ کیا جاتا ہے:
img {
ڈسپلے: بلاک؛
مارجن-بائیں: آٹو؛
مارجن-دائیں: آٹو؛
}
مندرجہ بالا مثال پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا آؤٹ پٹ نے ظاہر کیا ہے کہ تصویر اب مرکز میں ہے.
Flexbox ماڈیول کا استعمال کرتے ہوئے
' flexbox ” ایک ماڈیول ہے جس میں خصوصیات کا ایک مکمل مجموعہ ہوتا ہے۔ ہمارے معاملے میں، روٹ عنصر کی کلاس کو منتخب کریں اور ڈسپلے پراپرٹی کی قدر کے طور پر فلیکس استعمال کریں۔ مرکز کو قدر کے طور پر سیٹ کریں ' جواز فراہم کرنا 'اور' سیدھ میں آنے والی اشیاء خصوصیات:
جڑ {ڈسپلے: فلیکس؛
جواز پیش کرنا- مواد : مرکز
align-items: مرکز؛
پس منظر- رنگ : نیلا
}
کوڈ پر عمل کرنے کے بعد ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ تصویر div کے بیچ میں ظاہر ہوتی ہے جس کے پس منظر کا رنگ 'نیلے' پر سیٹ ہوتا ہے۔
گرڈ ویو لے آؤٹ ماڈیول کا استعمال
گرڈ ویو لے آؤٹ میں 12 کالم ہیں، اور کل چوڑائی 100% پر سیٹ کی گئی ہے اور یہ ہر عنصر کو ویب پیج پر مخصوص پوزیشن پر رکھتا ہے:
جڑ {ڈسپلے: گرڈ؛
جگہ کی اشیاء: مرکز؛
}
مندرجہ بالا کوڈ کے ٹکڑوں میں، 'گرڈ' ویلیو ڈسپلے پراپرٹی کو تفویض کی گئی ہے۔ جب کہ 'جگہ-آئٹم' کو 'جائز مواد' اور 'سیدھ میں-آئٹمز' خصوصیات کے لیے شارٹ ہینڈ کے طور پر استعمال کیا جاتا ہے:
آؤٹ پٹ تصدیق کرتا ہے کہ تصویر گرڈ طریقہ کا استعمال کرتے ہوئے div کے بیچ میں ہے:
پوزیشن وصف کا استعمال
روٹ کلاس کی پوزیشن کو رشتہ دار قدر اور امیج کلاس کو مطلق قدر پر سیٹ کرکے۔ تصویر کو div کے مرکز میں دکھایا جا سکتا ہے:
جڑ {پوزیشن: رشتہ دار
}
.تصویر {
چوڑائی : 700px;
اونچائی : 500px;
پوزیشن: مطلق؛
بائیں: پچاس %;
transform: translateX ( - پچاس % ) ;
}
تصویر کو '50%' کے بائیں طرف منتقل کیا جاتا ہے اور پھر X-axis پر '-50%' میں تبدیل ہوجاتا ہے۔ یہ تصویر کو div کے مرکز میں افقی طور پر دکھاتا ہے:
اس طرح تصویر کو div میں افقی طور پر مرکز کیا جا سکتا ہے۔
نتیجہ
ایک div عنصر میں تصویر کو افقی طور پر سیٹ کرنے کے لیے، ' مارجن '،' فلیکس ماڈیول '،' گرڈ لے آؤٹ 'اور' پوزیشن خصوصیات ' مارجن بائیں اور دائیں کی پراپرٹی آٹو پر سیٹ ہے۔ 'فلیکس ماڈیول' اور 'گرڈ لے آؤٹ' نے ڈسپلے کو بالترتیب فلیکس اور گرڈ پر سیٹ کیا اور ' جگہ آئٹم 'تصویر کو مرکز کرنے کے لیے پراپرٹی۔ پوزیشن کی خاصیت روٹ کلاس سے متعلق قدر اور امیج کلاس کے مطلق سیٹ کرتی ہے اور 'بائیں' اور 'ٹرانسفارم' خصوصیات کا استعمال کرتی ہے۔ اس بلاگ نے کامیابی کے ساتھ دکھایا ہے کہ تصویروں کو ایک div میں افقی طور پر کیسے مرکز کیا جائے۔