CSS-এ টেক্সট এবং ব্লক এলিমেন্ট সেন্টার করার একাধিক পদ্ধতি আছে। এই টিউটোরিয়ালে হরিজেন্টাল এবং ভার্টিকেল সেন্টারিংয়ের সবচেয়ে সাধারণ এবং কার্যকর পদ্ধতিগুলো আলোচনা করা হয়েছে।
১. টেক্সট এলিমেন্ট সেন্টার করা
.div-class {
text-align: center;
}
এটি ইনলাইন এবং ইনলাইন-ব্লক এলিমেন্টগুলোক সেন্টার করে।
২. ব্লক এলিমেন্ট সেন্টার করা (Margin Auto)
body {
width: 800px;
margin: auto;
}
কন্টেইনারের প্রস্থ নিয়ন্ত্রণ করে margin: auto ব্যবহার করলে ব্লক এলিমেন্ট হরিজেন্টালি সেন্টার হয়।
৩. ইমেজ সেন্টার করা
img {
display: block;
margin: 20px auto;
width: 50%;
}
display: block এবং margin: auto দিয়ে ইমেজ সেন্টার করা যায়।
৪. Div-এ ভার্টিকেল এবং হরিজেন্টাল সেন্টারিং
পদ্ধতি ১: Padding
.div-class {
padding: 50px 0;
text-align: center;
}
পদ্ধতি ২: Line-Height
#vertical-center-lineheight {
line-height: 200px;
text-align: center;
border: 5px double ivory;
}
এক লাইনের টেক্সটের জন্য কাজ করে। একাধিক লাইনের জন্য vertical-align: middle এবং display: inline-block লাগবে।
পদ্ধতি ৩: Transform
#vertical-center-transform {
height: 200px;
position: relative;
border: 5px double ivory;
}
#vertical-center-transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
পদ্ধতি ৪: Flexbox (সেরা এবং আধুনিক)
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
উপসংহার
Flexbox (align-items + justify-content) সবচেয়ে সহজ এবং বিশ্বস্ত পদ্ধতি। Transform জটিল লে আউটের জন্য ভালো। Padding এবং Line-height সাধারণ কেসের জন্য কার্যকর।
