ফ্লেক্সবক্স ব্যবহার করে শুধু বাটন নয়, যেকোনো এলিমেন্ট (ডিভ, টেক্সট, ইমেজ ইত্যাদি) কেন্দ্রে আনন্দা যায়।
উদাহরণ: এলিমেন্ট কেন্দ্রিকরণ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid rgb(0, 70, 128);
}
</style>
</head>
<body>
<h1>কেন্দ্রিকরণ উদাহরণ</h1>
<div class="centered">
<h2>এই টেক্সটটি উল্লম্ব ও অনুভূমিক উভয় দিক থেকে কেন্দ্রে আছে</h2>
</div>
</body>
</html>
কোড ব্যাখ্যা
- .centered ক্লাস: যেকোনো চাইল্ড এলিমেন্টের জন্য কাজ করবে।
- h2 এলিমেন্ট: এখানে টেক্সট ব্লক হিসেবে কেন্দ্রে আঁকা হয়েছে।
ব্যবহার ক্ষেত্র
মডাল পপআপ, লোডিং স্পিনার, হিরো সেকশনের কন্টেন্ট, কার্ডের ভিতরের আইকন+টেক্সট কেন্দ্রে রাখতে এই টেকনিক padrão।
