اموزش ویدئویی center – css وسط چین کردن باکس با css

تماشای دمو :

  برای دیدن دمو (نسخه ازمایشی کلیک کنید)

آموزش :

توی این اموزش قراره که یک دیو رو در تمام نسخه های موبایل ، تبلت ، لبتاپ ، کامپیوتر وسط صفحه قرار بگیره این کار بیشتر برای پاپ اپ استفاده میشه.

————————–

خوب حالا مایک دیو با کلاس center  تعریف کردیم و یک متن (سلام) و 3 عدد عکس رو اضافه کردیم.

————————————————————————————–

قابل ذکر است که برای عکس ها هم یک استایل زدیم و اندازه عکس را تایین کردیم.

————————————————————————————–

کلاسمون رو برای استایل دهی صدا زدیم .

سپس یک مستطیل به طول : 500px و عرض 300px ساختیم و رنگ دادیمو یکم پدینگ دادیم و همچنین نوشته ها را وسط چین کردیم.

در مرحله بعد باکس سایزینگگ دادیم که که کارمون بهم نریزه .

تاپ و لفت 50% دادیم که از بالا و چپ 50% فاصله بگیره.

خوب حالا اگر کد رو مشاهده کنید میبینید که کار وسط نیافتاده تقریبا مثل شکل زیر

center-c

خوب کاری که ماباید کنیم اینه که از راست و پایین هم فشار بدیم تا کار وسط قرار بگیرد.

پس ما

                margin-right: -50%;
transform: translate(-50%, -50%);

این دو خط رو اضافه میکنیم و بعد دوباره خروجی میگیریم که میبینیم کار اوکی شده و در همه حال کار ما وسط میمونه.

 

center-cs

و بقیه کد ها هم برای زیبایی کار استفاده میشه و شما میتولنید هر چیز دیگه ای به ان اضافه کنید.

تماشای ویدیو:

 

 

بخش دانلود :

برای دانلود ویدئو باکیفیت 720 کلیک کنید

برای دانلود کد کلیک کنید

حجم :  14 کیلوبایت

پسورد فایل ها (تمامی حروف حتی اعداد به اینگیلیسی و حروف کوچک) :     www.98ip.ircenter – css center – css center – css center – css center – css center – css center – css

همین الان عضو کانال ضد مدرسه بشین

درباره نویسنده

مطالب مرتبط

3 نظر

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *