margin: 0 auto এটা একটা CSS Property এখানে উপরে এবং নিচে অর্থাৎ Height বরাবর margin হবে 0px এবং ডানে এবং বামে অর্থাৎ Width বরাবর Parent div এর মোট যে জায়গা আছে সেখান থেকে Child element /Tag/Div এর Width বাদ দেয়ার পর যে যায়গা থাকবে তার অর্ধেক অর্ধেক করে লেফট থেকে এবং রাইট থেকে Child কন্টেন্ট সরে আসবে মোট কথা তখন সেন্টারে চলে আসবে। এই কাজ টা করার জন্য আপনাকে অবশ্যই যাকে margin: 0 auto প্রোপারর্টি দিতে চান তার একটা width declare করতে হবে । এবং Display যেন ব্লক থাকে । আরো ক্লিয়ার হওয়ার জন্য নিচের কোডের দিকে নজর দেই ।
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container{
border: 2px solid green;
width: 900px;
margin: 0 auto;
}
h1{
border: 2px solid yellow;
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello world</h1>
</div>
</body>
কে নিয়ে বোঝার চেষ্টা করব।
এখানে parent div container এবং child h1 tag । এখন parent div এর
width 900px এবং child এর width 400.
হিসাব = 900px-400px=500px
এবার child element এই 500px এর 250px parent div এর ডান দিক
থেকে এবং
500px
বাম দিক থেকে সরে আসবে অর্থাৎ মাঝখানে চলে আসবে।

0 Comments