با استفاده از CSS عرض و ارتفاع یک عنصر با کلاس .card را به 300px عرض و 200px ارتفاع تنظیم کرده و محتوای داخل آن را بصورت افقی و عمودی در مرکز قرار دهید طوری که افزودن padding اندازهٔ کلی را تغییر ندهد.

3.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:47

0.0

برای حل این مسئله از خواص width و height برای تعیین اندازه استفاده کنید، و با قرار دادن box-sizing: border-box از افزایش اندازهٔ کلی هنگام افزودن padding جلوگیری کنید. برای مرکزچینی عمودی و افقی می‌توانید از display: flex همراه با align-items: center و justify-content: center بهره ببرید؛ در صورت نیاز به واکنش‌گرایی از max-width یا واحد درصد استفاده کنید و برای جلوگیری از برهم‌خوردگی محتوا overflow: auto را در نظر بگیرید.

توسط پژوهشگر در 220 روز قبل ساعت 01:47
دسته بندی ها: CSS CSS for beginner
nima در 220 روز قبل ساعت 12:01

برای حفظ اندازه ثابت 300px عرض و 200px ارتفاع با padding، از box-sizing: border-box استفاده کنید تا اندازه کلی تغییر نکند. برای مرکزکردن افقی و عمودی محتوا داخل .card، از display: flex؛ align-items: center؛ justify-content: center بهره ببرید. اگر محتوای داخلی از اندازه فضا فراتر رفت، با overflow: auto امکان اسکرول ارائه می‌شود. برای واکنش‌گرا کردن، می‌توانید از max-width: 100% یا واحد درصد استفاده کنید و در صورت نیاز با رسانه‌ها اندازه‌ها را تنظیم کنید.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری