CSS-এ ব্লক এলিমেন্টগুলিকে সারিবদ্ধ করা
margin বৈশিষ্ট্যটি শুধুমাত্র মার্জিন নির্ধারণের জন্য নয়,
ব্লক এলিমেন্টগুলিকে কেন্দ্রীভূত করতেও প্রয়োগ করা হয়।
এটি করার জন্য, ডান এবং বাম মার্জিনকে auto মানে সেট করতে হবে।
নিচের উদাহরণে, ভিতরের ব্লকটি কেন্দ্রে চলে আসবে:
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 1px solid red;
}
.child {
height: 100px;
width: 200px;
border: 1px solid green;
margin: 10px auto;
}
:
মনে রাখবেন, এইভাবে শুধুমাত্র ব্লক এলিমেন্টগুলিকে, শুধুমাত্র অনুভূমিকভাবে এবং শুধুমাত্র যদি তাদের প্রস্থ নির্ধারণ করা থাকে, কেন্দ্রীভূত করা সম্ভব।
যদি আমাদের জন্য ভিন্ন শীর্ষ এবং নীচের মার্জিন
margin প্রয়োজন হয়, তাহলে এটি এভাবে লেখা যেতে পারে:
.child {
margin: 30px auto 10px auto;
}
এটি তিনটি মান দিয়েও পুনরায় লেখা যেতে পারে: প্রথমটি
শীর্ষ মার্জিন নির্ধারণ করবে, তৃতীয়টি - নীচেরটি, এবং
দ্বিতীয়টি ডান এবং বাম মার্জিনের জন্য auto মান নির্ধারণ করবে:
.child {
margin: 30px auto 10px;
}
নমুনা অনুসারে পৃষ্ঠাটি পুনরাবৃত্তি করুন, সবুজ ব্লকগুলি যাতে তাদের প্যারেন্টের কেন্দ্রে অবস্থান করে তা নিশ্চিত করুন:
