সিএসএস ব্যবহার করে সমস্ত ব্রাউজারগুলির জন্য কীভাবে উল্লম্বভাবে একটি ডাইভ উপাদান কেন্দ্র করবেন

ওয়েব ডেভেলপমেন্টে, উপাদানটির লেআউট সঠিকভাবে তৈরি করা অত্যন্ত গুরুত্বপূর্ণ। যাইহোক, অনেক CSS বৈশিষ্ট্য, যেমন CSS3 নমনীয় বক্স, ওয়েব পৃষ্ঠা এবং HTML উপাদানগুলির বিন্যাস সামঞ্জস্য করার জন্য দরকারী। নমনীয় বক্স ওয়েব পেজ এবং অ্যাপ্লিকেশনগুলিকে পুনরাবৃত্ত পদ্ধতিতে সাজানোর জন্য ব্যবহার করা হয়। এই ফ্লেক্সবক্স মোড জটিল ওয়েব পেজ এবং অ্যাপ্লিকেশনের জন্য লেআউট তৈরি করতে সাহায্য করে।

এই পোস্টটি আপনাকে সিএসএস উল্লম্বভাবে ব্যবহার করে সমস্ত ব্রাউজারগুলির জন্য একটি ডিভ উপাদানকে কীভাবে কেন্দ্রীভূত করতে হয় সে সম্পর্কে আপনাকে গাইড করবে।

সিএসএস ব্যবহার করে ডিভ এলিমেন্ট কিভাবে সারিবদ্ধ করবেন?

ডিসপ্লে প্রোপার্টি ব্যবহার করে ডিভ উপাদানটিকে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে “ ফ্লেক্স 'সিএসএস সহ' সারিবদ্ধ আইটেম 'সম্পত্তি এবং' ন্যায্যতা-সামগ্রী 'সম্পত্তি। 'সারিবদ্ধ-আইটেম' বৈশিষ্ট্যটি উপাদানটিকে উল্লম্বভাবে সারিবদ্ধ করে, এবং 'জাস্টিফাই-কন্টেন্ট' বৈশিষ্ট্য অনুভূমিকভাবে বিষয়বস্তুকে সারিবদ্ধ করে।

উদাহরণ: কিভাবে উল্লম্বভাবে CSS এর সাথে একটি div উপাদান কেন্দ্রীভূত করবেন?

HTML এ, প্রথমে একটি যোগ করুন '

' উপাদান এবং এটি ক্লাস বরাদ্দ ' মূল ” '

' ট্যাগের মধ্যে, একটি যোগ করুন ' নিম্নলিখিত বৈশিষ্ট্য সহ উপাদান:

---

---

• ' src ” বৈশিষ্ট্যটি চিত্রের URL নির্দিষ্ট করতে ব্যবহার করা হয়।
• ' সবকিছু ” অ্যাট্রিবিউট এমন কিছু পাঠ্যকে সংজ্ঞায়িত করে যা একটি চিত্রের জায়গায় প্রদর্শিত হবে যদি এটি লোড হতে ব্যর্থ হয়।
• ' প্রস্থ ” বৈশিষ্ট্যটি চিত্রের প্রস্থ সামঞ্জস্য করতে ব্যবহৃত হয়।
• তারপর, যোগ করুন '

  পৃষ্ঠায় অনুচ্ছেদ এম্বেড করার উপাদান।

এখানে HTML কোড আছে:

< div ক্লাস = 'মূল' >
< img src = '/images/laptop-notepad.jpg' সবকিছু = 'নোটপ্যাড এবং কলম সহ ল্যাপটপ' প্রস্থ = '300' >
< পি > ল্যাপটপ একটি বহনযোগ্য কম্পিউটারও পরিচিত হিসাবে একটি নোটবুক কম্পিউটার। পি >
div >

CSS-এ, আমরা div-এ বেশ কিছু স্টাইলিং বৈশিষ্ট্য উল্লেখ করব।

শৈলী 'প্রধান বিষয়বস্তু' ক্লাস

.মূল {
উচ্চতা: পঞ্চাশ % ;
পেছনের রং: #46C2CB;
ফন্ট-আকার: 24px;
প্যাডিং: 10px;
}

নিম্নলিখিত CSS বৈশিষ্ট্যগুলি 'এ সংজ্ঞায়িত করা হয়েছে মূল 'শ্রেণী:

• ' উচ্চতা
  কন্টেইনারের উচ্চতা সামঞ্জস্য করতে ” সম্পত্তি ব্যবহার করা হয়।
• ' পেছনের রং ” উপাদানটির পটভূমির রঙ সংজ্ঞায়িত করে।
• ' অক্ষরের আকার ” উপাদানের ফন্টের আকার নির্দিষ্ট করে।
• ' প্যাডিং ' সম্পত্তি উপাদানের বিষয়বস্তুর চারপাশে স্থান নির্ধারণ করে।

আউটপুট থেকে, আপনি লক্ষ্য করতে পারেন যে div উপাদানটির বিষয়বস্তু কেন্দ্রে নেই:

আসুন CSS বৈশিষ্ট্যগুলি প্রয়োগ করতে এগিয়ে যাই যা 'কে কেন্দ্রে রাখতে সহায়তা করে'

” উপাদান উল্লম্বভাবে। ক্লাসে এই বৈশিষ্ট্যগুলি যোগ করুন ' মূল

উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়:

প্রদর্শন: ফ্লেক্স ;
align-items: কেন্দ্র;

এখানে বর্ণনা আছে:

• ' প্রদর্শন 'সম্পত্তি' ফ্লেক্স ” ডিভ লেআউটটিকে এর উপাদানের সাথে নমনীয় করতে ব্যবহৃত হয়।
• ' সারিবদ্ধ আইটেম ' CSS সম্পত্তি একটি হিসাবে সেট করা হয়েছে ' কেন্দ্র ”, যা div উপাদানগুলিকে উল্লম্বভাবে সারিবদ্ধ করবে।

আউটপুট

আপনি শিখেছেন কিভাবে CSS ব্যবহার করে সমস্ত ব্রাউজারগুলির জন্য একটি div উপাদানকে উল্লম্বভাবে কেন্দ্রীভূত করতে হয়।

উপসংহার

একটি ডাইভ উপাদানকে উল্লম্বভাবে কেন্দ্রে রাখতে, CSS “ প্রদর্শন 'সম্পত্তি ব্যবহার করা হয়' এর সাথে ফ্লেক্স 'মান। এই মান

ধারকটিকে তার উপাদানগুলির সাথে নমনীয় করে তোলে। ডাইভ উপাদানটিকে উল্লম্বভাবে সারিবদ্ধ করতে, 'কে সামঞ্জস্য করুন সারিবদ্ধ আইটেম 'সম্পত্তি এবং এটি একটি বরাদ্দ করুন' কেন্দ্র 'মান। এই ব্লগটি আপনাকে দেখিয়েছে কিভাবে সমস্ত ব্রাউজারে ডিভ উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রীভূত করতে CSS ব্যবহার করতে হয়।