Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা responsive ওয়েব ডিজাইন তৈরি করার জন্য সহজ ও দ্রুত পদ্ধতি সরবরাহ করে। এর মধ্যে vertical এবং horizontal centering করার জন্য অনেক সহজ এবং কার্যকরী উপায় রয়েছে। এই সেন্ট্রিং পদ্ধতিগুলি সাধারণত উপাদানকে পেজের সঠিক অবস্থানে কেন্দ্রীভূত করতে ব্যবহার করা হয়। এখানে Materialize CSS-এ vertical এবং horizontal centering কিভাবে করা যায় তা বিস্তারিতভাবে আলোচনা করা হলো।
Horizontal Centering
Horizontal centering হলো একটি উপাদানকে তার প্যারেন্ট কনটেইনারের অনুভূমিকভাবে কেন্দ্রিত করা। Materialize CSS-এ এটি করা অত্যন্ত সহজ। নিচে বিভিন্ন পদ্ধতি দেওয়া হলো।
১. Block Element Horizontal Centering
যেকোনো block-level উপাদান যেমন div, p, h1 ইত্যাদি অনুভূমিকভাবে কেন্দ্রিত করতে আপনি center-align ক্লাস ব্যবহার করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Centered Block Element -->
<div class="center-align">
<h4>This Heading is Horizontally Centered</h4>
<p>This paragraph is also horizontally centered.</p>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- center-align ক্লাসটি উপাদানগুলিকে অনুভূমিকভাবে কেন্দ্রিত করে।
২. Inline Element Horizontal Centering
যেকোনো inline element (যেমন: <span>, <a>), আপনি display: block; margin: 0 auto; ব্যবহার করতে পারেন। Materialize CSS-এ এই পদ্ধতি সহজ এবং কার্যকর।
<a class="btn center-align" href="#">Click Me</a>
এখানে:
- btn center-align ক্লাস ব্যবহার করে বাটনটি অনুভূমিকভাবে কেন্দ্রিত হবে।
Vertical Centering
Vertical centering হল একটি উপাদানকে তার প্যারেন্ট কনটেইনারের উল্লম্বভাবে কেন্দ্রিত করা। Materialize CSS-এ vertical centering করার জন্য কয়েকটি উপায় রয়েছে, যা খুব সহজে ব্যবহার করা যায়।
১. Flexbox ব্যবহার করে Vertical Centering
Flexbox ব্যবহার করে উপাদানকে উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রিত করা সম্ভব। Materialize CSS-এ display: flex এবং align-items: center ব্যবহার করে সহজেই vertical centering করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.centered {
height: 100vh; /* Full height of the viewport */
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
}
</style>
</head>
<body>
<div class="centered">
<h4>This Content is Vertically and Horizontally Centered</h4>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- height: 100vh: প্যারেন্ট কনটেইনারের উচ্চতা ১০০% ভিউপোর্টের উচ্চতার সমান।
- display: flex: উপাদানগুলির মধ্যে ফ্লেক্সবক্স ব্যবহৃত হচ্ছে।
- justify-content: center: অনুভূমিকভাবে কেন্দ্রিত করবে।
- align-items: center: উল্লম্বভাবে কেন্দ্রিত করবে।
২. Using valign for Vertical Centering
Materialize CSS-এ valign ক্লাসের মাধ্যমে আপনি কনটেন্টকে সেন্টার করতে পারেন, তবে এটি শুধুমাত্র <td>, <tr>, বা <th> ট্যাগের জন্য কার্যকরী।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering with valign</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td class="valign-wrapper" style="height: 200px;">This content is vertically centered</td>
</tr>
</table>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- valign-wrapper ক্লাসটি vertical centering কার্যকরী করবে।
৩. Using card and card-content for Vertical Centering
Materialize CSS-এ card এবং card-content উপাদানগুলির সাথে সহজেই vertical centering করা যায়।
<div class="card" style="height: 300px;">
<div class="card-content valign-wrapper" style="height: 100%;">
<span class="card-title">Vertically Centered Text</span>
</div>
</div>
এখানে:
- valign-wrapper ক্লাসটি card-content এর মধ্যে উল্লম্বভাবে কনটেন্টকে কেন্দ্রিত করবে।
Combining Horizontal and Vertical Centering
কখনও কখনও আপনাকে একসাথে horizontal এবং vertical centering করতে হতে পারে। এক্ষেত্রে flexbox অথবা Materialize CSS এর বিভিন্ন ক্লাস ব্যবহার করে সহজে এই কাজটি করা যেতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.centered-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="centered-container">
<h4>This content is both horizontally and vertically centered</h4>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- justify-content: center এবং align-items: center ফ্লেক্সবক্সের মাধ্যমে কনটেন্টকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করবে।
উপসংহার
Materialize CSS-এ horizontal এবং vertical centering খুবই সহজ এবং দ্রুত করা যায়। আপনি flexbox, valign-wrapper এবং center-align এর মতো বিভিন্ন পদ্ধতি ব্যবহার করে আপনার উপাদানগুলিকে সেন্টার করতে পারেন। এগুলি একসাথে ব্যবহার করে আপনি সুন্দর এবং সুশৃঙ্খল ডিজাইন তৈরি করতে পারবেন, যা ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স উন্নত করবে।
Read more
