- অনুভূমিকভাবে ডিভিতে একটি চিত্রকে কীভাবে কেন্দ্র করবেন?
- মার্জিন সম্পত্তি
- ফ্লেক্সবক্স মডিউল
- গ্রিড ভিউ লেআউট
- অবস্থান বৈশিষ্ট্য
অনুভূমিকভাবে ডিভিতে একটি চিত্রকে কীভাবে কেন্দ্র করবেন?
ডেভেলপার মার্জিন প্রপার্টি, ফ্লেক্সবক্স মডিউল, গ্রিড ভিউ লেআউট এবং পজিশন অ্যাট্রিবিউট ব্যবহার করতে পারে একটি ইমেজকে অনুভূমিকভাবে ডিভ-এ কেন্দ্রে রাখতে। div ট্যাগে চিত্রটিকে অনুভূমিকভাবে কেন্দ্রে সারিবদ্ধ করতে নীচের নির্দেশিকা অনুসরণ করুন।
ধরা যাক, এইচটিএমএল ফাইলে একটি ডিভ রয়েছে যেখানে ইমেজটি এইভাবে স্থাপন করা হয়েছে:
< div ক্লাস = 'মূল' >
< img src = '../book.jpg' উচ্চতা = 'পঞ্চাশ%' প্রস্থ = 'পঞ্চাশ%' ক্লাস = 'ছবি' >
< / div >
ছবিটি 50% প্রস্থ এবং উচ্চতা এবং 'ইমেজ' এর একটি শ্রেণি পাচ্ছে।
মার্জিন সম্পত্তি ব্যবহার করে
ব্যবহারকারীরা মার্জিন সম্পত্তি ব্যবহার করে HTML উপাদানগুলির চারপাশে স্থান যোগ করতে পারেন। এটি উইন্ডো পর্দার আকার পরিবর্তন করার পরে উপলব্ধ স্থান অনুযায়ী একটি মার্জিন নির্ধারণ করে। উদাহরণস্বরূপ, অটোতে মার্জিন-বাম এবং ডান সেট করে এবং প্রদর্শন সম্পত্তি ব্লক করতে সেট করা হয়:
img {
প্রদর্শন ব্লক;
মার্জিন-বাম: স্বয়ংক্রিয়;
মার্জিন-ডান: স্বয়ংক্রিয়;
}
উপরের উদাহরণটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
উপরের আউটপুটটি প্রদর্শন করেছে যে ছবিটি এখন কেন্দ্রে রয়েছে।
ফ্লেক্সবক্স মডিউল ব্যবহার করে
দ্য ' flexbox ” হল একটি মডিউল যা বৈশিষ্ট্যগুলির একটি সম্পূর্ণ সেট ধারণ করে। আমাদের ক্ষেত্রে, রুট এলিমেন্ট ক্লাস সিলেক্ট করুন এবং ডিসপ্লে প্রপার্টির মান হিসেবে ফ্লেক্স ব্যবহার করুন। 'এর জন্য একটি মান হিসাবে কেন্দ্র সেট করুন ন্যায্যতা-সামগ্রী ' এবং ' সারিবদ্ধ আইটেম বৈশিষ্ট্য:
.root {প্রদর্শন: flex;
ন্যায্যতা- বিষয়বস্তু : কেন্দ্র;
align-items: কেন্দ্র;
পটভূমি- রঙ : নীল;
}
কোডটি কার্যকর করার পরে ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
উপরের আউটপুটটি দেখায় যে চিত্রটি ডিভের মাঝখানে প্রদর্শিত হয় এবং একটি পটভূমির রঙ 'নীল' তে সেট করে।
গ্রিড ভিউ লেআউট মডিউল ব্যবহার করে
গ্রিড ভিউ লেআউটটিতে 12টি কলাম রয়েছে এবং মোট প্রস্থ 100% সেট করা হয়েছে এবং এটি প্রতিটি উপাদানকে ওয়েবপৃষ্ঠায় একটি নির্দিষ্ট অবস্থানে রাখে:
.root {প্রদর্শন: গ্রিড;
স্থান-আইটেম: কেন্দ্র;
}
উপরের কোড স্নিপেটে, 'গ্রিড' মান প্রদর্শন সম্পত্তিতে বরাদ্দ করা হয়েছে। যদিও 'জাস্টিফাই-কন্টেন্ট' এবং 'সারিবদ্ধ-আইটেম' বৈশিষ্ট্যগুলির জন্য 'স্থান-আইটেম' একটি সংক্ষিপ্ত হস্ত হিসাবে ব্যবহৃত হয়:
আউটপুট প্রমাণ করে যে চিত্রটি ডিভের কেন্দ্রে রয়েছে গ্রিড পদ্ধতি ব্যবহার করে:
অবস্থান বৈশিষ্ট্য ব্যবহার করে
রুট ক্লাসের অবস্থান আপেক্ষিক মান এবং ইমেজ ক্লাসকে পরম মান নির্ধারণ করে। চিত্রটি ডিভের কেন্দ্রে প্রদর্শিত হতে পারে:
.root {অবস্থান: আপেক্ষিক;
}
.ছবি {
প্রস্থ : 700px;
উচ্চতা : 500px;
অবস্থান: পরম;
বাম: পঞ্চাশ %;
রূপান্তর: translateX ( - পঞ্চাশ % ) ;
}
চিত্রটি '50%' এর বাম দিকে সরানো হয় এবং তারপরে X-অক্ষে '-50%' এ রূপান্তরিত হয়। এটি অনুভূমিকভাবে ডিভের কেন্দ্রে চিত্রটি প্রদর্শন করে:
এভাবেই চিত্রটিকে অনুভূমিকভাবে ডিভ-এ কেন্দ্রীভূত করা যায়।
উপসংহার
একটি div উপাদানে চিত্রটিকে অনুভূমিকভাবে সেট করতে, ' মার্জিন ', ' ফ্লেক্স মডিউল ', ' গ্রিড বিন্যাস ' এবং ' অবস্থান ' বৈশিষ্ট্য। দ্য ' মার্জিন ' বাম এবং ডান সম্পত্তি স্বয়ংক্রিয় সেট করা হয়. 'ফ্লেক্স মডিউল' এবং 'গ্রিড লেআউট' প্রদর্শনটিকে যথাক্রমে ফ্লেক্স এবং গ্রিডে সেট করে এবং ' স্থান আইটেম ' ছবি কেন্দ্রে সম্পত্তি. পজিশন প্রপার্টি রুট ক্লাসের সাপেক্ষে মান সেট করে এবং ইমেজ ক্লাসের জন্য পরম এবং 'বাম' এবং 'ট্রান্সফর্ম' বৈশিষ্ট্য ব্যবহার করে। এই ব্লগটি সফলভাবে প্রদর্শন করেছে কিভাবে একটি div-এ চিত্রগুলিকে অনুভূমিকভাবে কেন্দ্রীভূত করা যায়৷