پیشنهاد شگفت‌انگیز سبزلرن: 50% تخفیف برای آموزش حرفه ای NodeJS بدون پیش نیاز
مشاهده دوره
ثانیه
دقیقه
ساعت
روز
پرسش

چطور میتونم عناصر رو به صورت افقی یا عمودی تو بوت استرپ ۵ بیارم وسط؟

How can I center elements horizontally or vertically with Bootstrap 5?

سلام من دارم با بوت استرپ کار می‌کنم و نیاز دارم یک عنصر رو به صورت کامل تو مرکز یک div یا container قرار بدم. میخوام بدونم چطور میتونم این کار رو به شکل صحیح و کاربردی انجام بدم

1403/06/01
پاسخ
مهرشاد براتی برنامه نویس فول استک وب ،موبایل ،دستکاپ ،کارشناس ارشد مهندسی کامپیوتر نرم افزار
بیوگرافی مهرشاد براتی

سلام برای وسط چین کردن عناصر تو بوت استرپ میتونی از کلاس‌ های داخلی بوت استرپ استفاده کنی که این کار رو خیلی راحت می‌کنه.

اگر میخوای یک عنصر رو به صورت افقی وسط‌ چین کنی، میتونی از کلاس‌های flex استفاده کنی. مثلا کافیه کد زیر رو به div والد اضافه کنی:

<div class="d-flex justify-content-center">
  <div>Your content here</div>
</div>

اینجا، d-flex باعث میشه که والد به حالت فلکس‌ باکس در بیاد و justify-content-center هم بچه‌ های داخلش رو به صورت افقی وسط‌ چین میکنه.

برای وسط چین عمودی هم باز میتونی از ترکیب کلاس‌های فلکس استفاده کنی

<div class="d-flex align-items-center" style="height: 100vh;">
  <div>Your content here</div>
</div>

اینجا، align-items-center محتوا رو به صورت عمودی میاره وسط قرار برای اینکه این وسط چین کردن به شکل عمودی معلوم باشه ارتفاع والد رو به ۱۰۰ درصد ویوپورت (100vh) تنظیم کردم

اگر میخوای که عنصرت هم به صورت افقی و هم به صورت عمودی وسط بیاد، میتونی از ترکیب این دوتا استفاده کنی

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div>Your content here</div>
</div>

این کد باعث میشه که محتوات هم به صورت افقی و هم عمودی در وسط بیاد

پاسخ: 1403/06/01
آخرین آپدیت: 1403/07/21