ایک ذمہ دار ویب سائٹ اسکرین کے سائز اور ڈیوائس کے طول و عرض کو اپنا سکتی ہے جس میں اسے دیکھا جا رہا ہے۔ ویب سائٹ کے ردعمل کے ساتھ، یہ بھی ضروری ہے کہ تصاویر اور متن کو سیدھ میں رکھا جائے اور جواب دیا جائے۔ منسلک تصاویر وہ ہیں جو متن کو اپنے ارد گرد لپیٹتی ہیں۔ جبکہ منسلک متن وہ ہوتا ہے جو پورے پیراگراف کی طرح لگتا ہے۔
یہ مضمون تصویروں اور متن کو جوابی طور پر سیدھ میں لانے کے طریقہ پر غور کرے گا۔
امیجز اور ٹیکسٹ کو جوابی طور پر کیسے سیدھا کیا جائے؟
بوٹسٹریپ کا استعمال کرتے ہوئے تصاویر اور متن سمیت مواد کو جوابی طور پر منسلک کیا جا سکتا ہے۔ مظاہرہ فراہم کرنے کے لیے، ہم نے دو مثالیں درج کی ہیں:
- متن کو عمودی اور تصویر کو افقی طور پر بیچ میں سیدھ کریں۔
- متن اور ریسپانسیو امیج کو بائیں سیدھ میں رکھیں۔
مثال 1: درمیان میں متن کو عمودی اور تصویر کو افقی طور پر سیدھ کریں۔
سب سے پہلے، تصویر کو افقی اور متن کو عمودی طور پر مرکز کرنے کی کوشش کریں۔ اس مقصد کے لیے ذیل میں دی گئی ہدایات پر عمل کریں:
مرحلہ 1: ایک HTML ڈھانچہ بنائیں
ایچ ٹی ایم ایل ڈھانچہ بناتے وقت، سب سے پہلے، ' بوٹسٹریپ اور بیرونی CSS فائل بھی۔ اس کے بعد، ایک بنائیں مرحلہ 2: CSS کا اطلاق کریں۔ کنٹینر پر: پر متن پر: یہ دیکھا جا سکتا ہے کہ متن عمودی طور پر مرکز میں ہے، اور تصویر افقی طور پر مرکز میں ہے: مثال 2: متن اور ریسپانسیو امیج کو بائیں سیدھ میں کریں۔ اس دی گئی مثال میں، تصویر اور متن بائیں طرف سیدھ میں ہوں گے۔ اس مقصد کے لیے، درج ذیل مرحلہ وار ہدایات پر عمل کریں: مرحلہ 1: ایک HTML ڈھانچہ بنائیں HTML کوڈ اوپر جیسا ہی ہے، مثال میں استعمال کیا گیا ہے۔ مرحلہ 2: CSS کا اطلاق کریں۔ کنٹینر پر: پر متن پر: آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ متن اور تصویر بائیں سیدھ میں ہیں: امیجز اور ٹیکسٹ کو جوابی طور پر سیدھ میں لانے کے لیے، پہلے سی ایس ایس میں ایک گرڈ یا فلیکس لے آؤٹ بنائیں، پھر ' align-item 'پراپرٹی ویلیو' مرکز ' ایسا کرنے سے سی ایس ایس میں تصاویر اور متن کو جوابی طور پر سیدھ میں لایا جائے گا۔ اس تحریر نے صارفین کو تصاویر اور متن کو جوابی طور پر سیدھ میں لانے کے لیے ایک مکمل گائیڈ فراہم کیا ہے۔ ٹیگ اور متن:
< جسم >
< div کلاس = 'کنٹینر' >
< img src = 'test-image.jpg' سب کچھ = 'ٹیسٹ امیج' >
< div کلاس = 'متن' > یہ کچھ متن ہے۔ div >
div >
جسم >
:
کنٹینر {
ڈسپلے: فلیکس ;
متن سیدھ: مرکز؛
justify-content: مرکز؛
align-items: مرکز؛
}
img {
زیادہ سے زیادہ چوڑائی: 100 % ;
اونچائی: آٹو؛
}
متن {
فونٹ سائز: 16px؛
زیادہ سے زیادہ چوڑائی: 390px؛
}
:
کنٹینر {
ڈسپلے: فلیکس ;
flex-direction: column;
align-items: flex-start؛
متن سیدھ کریں: بائیں؛
}
img {
زیادہ سے زیادہ چوڑائی: 100 % ;
اونچائی: آٹو؛
}
متن {
فونٹ سائز: 16px؛
زیادہ سے زیادہ چوڑائی: 390px؛
}
نتیجہ