CSS এবং HTML ব্যবহার করে ব্লক বা ইনলাইন-ব্লক বাটন এলিমেন্ট কীভাবে সেন্টার করবেন?
এটি কিছুটা জটিল হতে পারে, কিন্তু আপনার বাটন সেন্টার করার কিছু দ্রুত টিপস নিচে দেওয়া হলো, চাইতে এলিমেন্টের টাইপ যেকোনো হয়।
ইনলাইন-ব্লক বাটন এলিমেন্ট
বাটন এবং লিংক এলিমেন্ট ডিফল্টভাবে display: inline-block সেট থাকে। ইনলাইন-ব্লক সেট করা একটি এলিমেন্ট পেজে বাম থেকে ডানে নরমাল ডকুমেন্ট ফ্লোতে থাকে।
এটি মানে যদি আপনার কাছে একের পর এক দুটি ইনলাইন-ব্লক এলিমেন্ট থাকে, তবে সেগুলো পাশাপাশি দেখাবে যদি যথেষ্ট হরিজন্টাল স্পেস থাকে।
এটি display: inline সেট করা এলিমেন্টের মতো, ফर्क শুধু ইনলাইন-ব্লক এলিমেন্টের প্রস্থ এবং উচ্চতা কন্ট্রোল করা যায়, ইনলাইন এলিমেন্টের নয়।
text-align: center ব্যবহার করে সেন্টার করা
আপনি ইনলাইন-ব্লক (এবং ইনলাইন) এলিমেন্টগুলো একটি প্যারেন্ট এলিমেন্টে text-align: center সেট করে সেন্টার করতে পারেন।
কোডে এটি কীভাবে কাজ করে দেখুন। আমাদের HTML মার্কআপ:
<div class="text-center"> <button type="submit">Text-align: center</button> </div>আমাদের CSS:
.text-center { text-align: center; }আমরা আমাদের <button> এলিমেন্টকে text-align: center সেট করা একটি <div> দিয়ে ভেঙে দিয়েছি। এটি বাটনটিকে নিচের মতো সেন্টার করবে:
ব্লক বাটন এলিমেন্ট স্ট্যাটিক প্রস্থসহ
ব্লক এলিমেন্টগুলো text-align: center দিয়ে সেন্টার করা যায় না কারণ সেগুলো ডিফল্টভাবে ফুল-প্রস্থ থাকে যতক্ষণ না স্ট্যাটিক প্রস্থ দেওয়া হয়।
কখনো কখনো আপনাকে বাটনে একটি স্ট্যাটিক প্রস্থ সেট করতে হতে পারে, তখন আপনি এই টেকনিক ব্যবহার করে পেজে বাটন সেন্টার করতে পারেন।
ধরা যাক, আমাদের একটি বাটন আছে যা আমরা 200px প্রস্থে সেট করেছি। এটি শুধু 200px হলেও, এটি অন্য কোনো এলিমেন্টকে তার পাশে থাকতে দেবে না।
আপনি একটি ব্লক লেভেল এলিমেন্ট সেন্টার করতে পারেন margin-left এবং margin-right কে auto সেট করে। আমরা শর্টহ্যান্ড margin: 0 auto ব্যবহার করে এটি করতে পারি। (এটি margin-top এবং margin-bottom-কেও শূন্য সেট করে।)
কোডে এটি কেমন দেখাবে:
<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button> .button.block { display: block; width: 200px; } .margin-auto { margin: 0 auto; }পেজে বাটনটি নিচের মতো দেখাবে:
ফ্লেক্সবক্স ব্যবহার করে সেন্টার করা
বিকল্পভাবে, আপনি ইনলাইন-ব্লক এবং ব্লক উভয় এলিমেন্টই ফ্লেক্সবক্স ব্যবহার করে সেন্টার করতে পারেন।
বাটনটি একটি প্যারেন্ট <div> দিয়ে ভেঙে দিন এবং প্যারেন্টকে display: flex এবং justify-content: center সেট করুন।
কোডটি নিচে দেওয়া হলো:
<div class="flex-parent jc-center"> <button type="submit">Inline-block button</button> </div> <div class="flex-parent jc-center"> <button type="submit">Block button</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; }
দুই বাটন পাশাপাশি
কখনো কখনো আপনি দুটি বাটন পাশাপাশি রাখতে চাইবেন, কিন্তু উভয়কেই একসাথে পেজে সেন্টার করতে চাইবেন।
এটি আপনি উভয় বাটনকে একটি প্যারেন্ট <div> দিয়ে ভেঙে এবং ফ্লেক্সবক্স ব্যবহার করে পেজে সেন্টার করে অর্জন করতে পারেন।
কোডটি নিচে দেওয়া হলো:
<div class="flex-parent jc-center"> <button type="submit" class="green margin-right">Confirm</button> <button type="submit" class="magenta">Cancel</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; } button.margin-right { margin-right: 20px; }লক্ষ্য করুন আমরা প্রথম বাটনে margin-right: 20px যোগ করেছি যাতে তাদের মাঝপথে স্পেস থাকে।
পেজে বাটনগুলো কেমন দেখাবে!
আপনি সारा আসল কোড Codepen-এ এখানে দেখতে পারেন।
