কিভাবে আপনি CSS এবং HTML ব্যবহার করে একটি ব্লক বা ইনলাইন-ব্লক বোতাম উপাদান কেন্দ্রীভূত করতে পারেন?
এটি কিছুটা কঠিন হতে পারে, তবে আপনার বোতামটি কীভাবে কেন্দ্রীভূত করবেন সে সম্পর্কে এখানে কিছু দ্রুত টিপস রয়েছে, এটি যে ধরনের উপাদানই হোক না কেন।
ইনলাইন-ব্লক বোতাম উপাদান
বোতাম এবং লিঙ্ক উপাদানগুলি, ডিফল্টরূপে, display: inline-block এ সেট করা থাকে . ইনলাইন-ব্লক সেট সহ একটি উপাদান পৃষ্ঠায় নথির স্বাভাবিক প্রবাহের মধ্যে থাকবে যখন এটি বাম থেকে ডানে চলে যাবে৷
এর মানে হল যে যদি আপনার কাছে একের পর এক দুটি ইনলাইন-ব্লক উপাদান থাকে, পর্যাপ্ত অনুভূমিক স্থান থাকলে সেগুলি পাশাপাশি প্রদর্শিত হবে৷
এটি display: inline সহ উপাদানগুলির অনুরূপ সেট করুন, আপনি ইনলাইন-ব্লক উপাদানের উচ্চতা এবং প্রস্থ নিয়ন্ত্রণ করতে পারবেন, ইনলাইন উপাদান নয়।
টেক্সট-সারিবদ্ধ ব্যবহার করে কেন্দ্রীকরণ:কেন্দ্র
আপনি text-align: center সেট করে ইনলাইন-ব্লক (এবং ইনলাইন) উপাদানগুলিকে কেন্দ্র করতে পারেন একটি অভিভাবক উপাদানে৷
চলুন দেখে নেওয়া যাক এই কোডে কিভাবে কাজ করে। এই হল আমাদের HTML মার্কআপ:
<div class="text-center">
<button type="submit">Text-align: center</button>
</div>এবং আমাদের CSS:
.text-center {
text-align: center;
}
আমরা আমাদের <button> মুড়েছি একটি <div> এ উপাদান text-align: center সহ সেট এর ফলে বোতামটিকে এভাবে কেন্দ্রীভূত করা হবে:
ব্লক বোতাম উপাদান w/ স্ট্যাটিক প্রস্থ
ব্লক উপাদানগুলিকে 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 যোগ করেছি প্রথম বোতামে, তাদের মধ্যে স্থান যোগ করার জন্য।
পৃষ্ঠায় বোতামগুলি কেমন দেখাবে তা এখানে!
আপনি এখানে কোডপেনের সমস্ত আসল কোড দেখতে পারেন।
