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