CSS এর সাথে আপনার ওয়েবপেজ লেআউটকে কেন্দ্রে সারিবদ্ধ করার দুটি ভিন্ন উপায় শিখুন।
ধরা যাক আপনি আপনার ওয়েবসাইটের জন্য একটি নিবন্ধ বিন্যাস স্টাইল করছেন এবং আপনি <article>টিকে কেন্দ্রে সারিবদ্ধ করতে চান আপনার পৃষ্ঠার ঠিক মাঝখানে অনুভূমিকভাবে উপাদান।
আপনি উপায় একটি দম্পতি যে করতে পারেন. অনুভূমিকভাবে উপাদানগুলিকে কেন্দ্রে সারিবদ্ধ করার সবচেয়ে সহজ, এবং ক্লাসিক পদ্ধতি হল CSS প্রপার্টি margin ব্যবহার করে এবং এটির বাম এবং ডান মান auto সেট করুন .
আপনি বিনামূল্যে কোডপেন সম্পাদক ব্যবহার করে অনুসরণ করতে পারেন।
একটি নিবন্ধ বিন্যাসের জন্য নিম্নলিখিত মৌলিক HTML মার্কআপ নিন:
<article>
<h1>Title for your article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
reprehenderit error.
</p>
</article>এবং নিম্নলিখিত CSS ঘোষণা ব্লক:
article {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}এটি আপনার নিবন্ধের লেআউটটিকে আপনার ওয়েবপৃষ্ঠার ঠিক মাঝখানে সারিবদ্ধ করবে৷
max-width উপাদানগুলিকে অনুভূমিকভাবে কেন্দ্রে সারিবদ্ধ করার জন্য সম্পত্তি প্রয়োজন কারণ অন্যথায়, পাঠ্যটি স্বয়ংক্রিয়ভাবে আপনার পৃষ্ঠার বাম থেকে ডান প্রান্তে ছড়িয়ে পড়বে৷
ফ্লেক্সবক্সের সাথে কেন্দ্রে অনুভূমিকভাবে সারিবদ্ধ করুন
এছাড়াও আপনি আধুনিক flexbox ব্যবহার করে কেন্দ্র সারিবদ্ধ করতে পারেন সম্পত্তি flexbox পথের কারণে চাইল্ড এলিমেন্টে প্রপার্টি পাঠায়, আপনার লেআউটকে কেন্দ্রে সারিবদ্ধ করার সবচেয়ে সহজ উপায় হল আপনার <article> মোড়ানো। অন্য উপাদানে উপাদান, এবং তারপর flexbox যোগ করুন নতুন প্যারেন্ট এলিমেন্টের বৈশিষ্ট্য।
আগে থেকে <main> দিয়ে নিবন্ধের উপাদানটি মোড়ানো যাক উপাদান:
<main>
<article>
<h1>Title for your article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
reprehenderit error.
</p>
</article>
</main>
এবং ফ্লেক্সবক্স বৈশিষ্ট্যগুলি সরান (max-width নয় ) article { } থেকে একটি নতুন main { } ঘোষণা ব্লক ব্লক:
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
article {
max-width: 640px;
}
এটি margin: auto এর সাথে একইভাবে কাজ করবে ঘোষণা আপনি আগে দেখেছেন।
