প্রিয় ডেভেলপার, আশা করি ভালো আছেন। আজকের ব্লগে কিভাবে একটি Div কে Center করা যায় তার জন্য কয়েকটি গুরুত্বপূর্ণ কোড Snippets শেয়ার করবো। আশা করি আপনারা উপকৃত হবেন, তাহলে চলুন শুরু করা যাক –
Flexbox ব্যবহার করে –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Adjust as needed */
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Notesaid24 Website!</h1>
</div>
</body>
</html>
Grid ব্যবহার করে –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
display: grid;
place-items: center;
height: 100vh; /* Adjust as needed */
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Notesaid24 Website!</h1>
</div>
</body>
</html>
Position এবং Transform ব্যবহার করে –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Notesaid24 Website!</h1>
</div>
</body>
</html>
Div এবং Margin ব্যবহার করে -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Notesaid24 Website!</h1>
</div>
</body>
</html>
আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
