সুচিপত্র:

আমি কিভাবে আমার বুটস্ট্র্যাপ কার্ড কেন্দ্র করব?
আমি কিভাবে আমার বুটস্ট্র্যাপ কার্ড কেন্দ্র করব?

ভিডিও: আমি কিভাবে আমার বুটস্ট্র্যাপ কার্ড কেন্দ্র করব?

ভিডিও: আমি কিভাবে আমার বুটস্ট্র্যাপ কার্ড কেন্দ্র করব?
ভিডিও: পৃষ্ঠা বুটস্ট্র্যাপে কেন্দ্র কার্ড 5 2024, মে
Anonim

অতিরিক্ত CSS এর কোন প্রয়োজন নেই, এবং বুটস্ট্র্যাপ 4 এ একাধিক কেন্দ্রীকরণ পদ্ধতি রয়েছে:

  1. পাঠ্য- কেন্দ্র জন্য কেন্দ্র প্রদর্শন:ইনলাইন উপাদান।
  2. mx-অটো এর জন্য কেন্দ্রীভূত প্রদর্শন: প্রদর্শনের ভিতরে ব্লক উপাদান: ফ্লেক্স (ডি-ফ্লেক্স)
  3. offset-* বা mx-auto ব্যবহার করা যেতে পারে কেন্দ্র গ্রিড কলাম।
  4. বা ন্যায্যতা-সামগ্রী- কেন্দ্র সারিতে কেন্দ্র গ্রিড কলাম।

এইভাবে, আপনি বুটস্ট্র্যাপে উপাদানগুলিকে কীভাবে কেন্দ্র করবেন?

  1. অনুভূমিক প্রান্তিককরণ। বুটস্ট্র্যাপ কেন্দ্র (অনুভূমিক সারিবদ্ধ)
  2. কেন্দ্র পাঠ্য। শুধু ক্লাস যোগ করুন.
  3. কেন্দ্রের চিত্র। এছাড়াও আপনি যোগ করে ছবিটি কেন্দ্রে রাখতে পারেন।
  4. কেন্দ্র বোতাম। উপরের মত একই, শুধু যোগ করুন.
  5. কেন্দ্র কলাম। ফ্লেক্সবক্স ব্যবহার করে আপনি গ্রিডের পুরো কলামটিকে কেন্দ্র করতে পারেন।
  6. বিষয়বস্তু ন্যায্যতা.

আমি কিভাবে বুটস্ট্র্যাপ 4 এ একটি বোতাম কেন্দ্র করব? এর ব্যবহার দিয়ে বুটস্ট্র্যাপ 4 ইউটিলিটি আপনি অনুভূমিকভাবে পারে কেন্দ্র অনুভূমিক মার্জিন 'অটো' সেট করে একটি উপাদান নিজেই। অনুভূমিক মার্জিন অটোতে সেট করতে আপনি mx-auto ব্যবহার করতে পারেন। m মার্জিন নির্দেশ করে এবং x x-অক্ষ (বাম+ডান) নির্দেশ করবে এবং স্বয়ংক্রিয় সেটিং নির্দেশ করবে।

এইভাবে, আপনি কিভাবে CSS এ একটি কার্ড কেন্দ্র করবেন?

CSS স্তর 3 এ উল্লম্বভাবে কেন্দ্রীভূত করা

  1. ধারকটিকে তুলনামূলকভাবে অবস্থান করুন, যা এটিকে একেবারে অবস্থানকারী উপাদানগুলির জন্য একটি ধারক হিসাবে ঘোষণা করে।
  2. উপাদান নিজেই একেবারে অবস্থান করা.
  3. 'শীর্ষ: 50%' সহ পাত্রের অর্ধেক নিচে রাখুন।
  4. উপাদানটিকে তার নিজস্ব উচ্চতার অর্ধেক উপরে নিয়ে যেতে একটি অনুবাদ ব্যবহার করুন।

আমি কিভাবে একটি div কেন্দ্র করব?

টেক্সট-সারিবদ্ধ পদ্ধতি

  1. আপনি একটি অভিভাবক উপাদান (সাধারণত একটি মোড়ক বা ধারক হিসাবে পরিচিত) দিয়ে কেন্দ্রে রাখতে চান এমন ডিভটি আবদ্ধ করুন
  2. প্যারেন্ট এলিমেন্টে "টেক্সট-সারিবদ্ধ: কেন্দ্র" সেট করুন।
  3. তারপর অভ্যন্তরীণ ডিভটি "ডিসপ্লে: ইনলাইন-ব্লক" এ সেট করুন

প্রস্তাবিত: