یکی از اولین ترفندهایی که من یاد گرفتم
با سی‌اس‌اس این بود که چطور یه صفحه رو داخل مرورگر وسط‌چین کنم
قدیما خیلی از صفحه‌ها وسط‌چین نبودن
و من خیلی برام جالب بود
که می‌شه خیلی راحت یه صفحه رو
با یه ترفند خیلی ساده وسط مرورگر قرار داد
پس حالا می‌خوام این ترفند خیلی جالب رو
توی این ویدیو با شما به اشتراک بذارم
اولین کاری که باید انجام بدیم
برای اینکه این ترفند جواب بده اینه که همه
محتوا رو داخل یه المان ظرف (container) بذاریم
چون اگه این کارو نکنیم
خب دیگه چیزی وجود نداره که بخواد توی پنجره وسط‌چین بشه
منظورم اینه که الان
وقتی اندازه پنجره مرورگر رو تغییر می‌دیم
کل محتوا درواقع کشیده میشه
از یه طرف تا طرف دیگه
پس چیزی وجود نداره که بخواد وسط مرورگر
قرار بگیره درسته؟
پس اول باید یه ظرف درست کنیم
و اون ظرف هم باید یه عرض مشخص داشته باشه
پس بیاید همه اینا رو بذاریم داخل یه جعبه
و این جعبه لازم نیست معنای خاصی داشته باشه
یعنی نیازی به المان معنایی اچ‌تی‌ام‌ال اینجا نداریم
پس خیلی ساده می‌تونیم از یه div استفاده کنیم
حالا این div نباید اینجا بسته بشه
بلکه باید درست قبل از پایان body بسته بشه
پس از همین‌جا شروع میشه
و تازه اینجا بعد از footer بسته میشه
و حالا وقتی ذخیره می‌کنم
تمام فاصله‌گذاری‌ها (indentation) خودکار درست میشه
و همینطور هم شد
عالیه
این یکی از نکات خیلی خوب Prettier هست
وقتی المان‌های دیگه رو اضافه می‌کنیم
همه فاصله‌گذاری‌ها خودکار درست میشه
که خیلی خیلی کمک‌کننده‌ست
اینجا باید براش یه اسم بذاریم
و من معمولا اسم "container" رو می‌ذارم
بیاید این کلاس رو کپی کنیم و اینجا استایل بدیم
و همونطور که گفتم
الان باید برای این ظرف یه عرض مشخص بدیم
چون در غیر این صورت چیزی برای وسط‌چین کردن وجود نداره
پس از ۷۰۰ پیکسل شروع کنیم
و بعدا یه کم پهن‌ترش می‌کنم
خب حالا عرض ۷۰۰ پیکسل رو داریم
می‌بینید که حالا عرض این المان
مثلا این هدر که یه المان فرزندشه
الان فقط ۷۰۰ پیکسل هست
پس دوباره این div اینجا عرضش ۷۰۰ هست
و اینجا هم می‌بینیم
و حالا المان‌های فرزند داخلش
طبیعتاً نمی‌تونن بزرگتر از اون باشن
پس فقط می‌تونن به اندازه ظرفش باشن
برای همین این یکی هم ۶۰۰ پیکسل پهنا داره
یا درواقع ۷۰۰
یعنی ۶۲۰ به علاوه ۴۰ و ۴۰ خب؟
پس این ربطی به ارث‌بری یا این چیزا نداره
اصلا همچین چیزی نیست
در واقع این منطق ساده‌ست که
یه المان فرزند هیچ‌وقت نمی‌تونه پهن‌تر باشه
از المان والدش
پس اگه المان والد ۷۰۰ باشه
همه بقیه هم ۷۰۰ خواهند بود
مثلا این یکی ۷۰۰ هست و H2 هم همینطور
و همینطور الی آخر
درسته
اینجا هم همینطور برای تصویر
که ۱۰۰٪ از والدشه
و حالا وقتی صفحه رو بزرگ‌تر می‌کنیم
این ظرف ۷۰۰ پیکسلی همچنان می‌مونه
سمت چپ
و حالا به عنوان آخرین مرحله
باید این المان ظرف رو
داخل مرورگر وسط‌چین کنیم
و این همون ترفند اصلیه
پس دادن یه عرض مشخص به ظرف شد بخش اول
و حالا بخش دوم اینه که یه سری فاصله (margin)
سمت چپ و راست ظرف اضافه کنیم
پس می‌تونیم بگیم margin-left و بذاریم روی auto
که یعنی خودکار
و margin-right هم خودکار
یعنی اینطوری که فاصله سمت چپ
باید برابر باشه با
فاصله سمت راست
و هر دو به صورت خودکار توسط مرورگر
محاسبه می‌شن
و این یعنی یه فاصله سمت چپ و راست ایجاد میشه
که دقیقاً هم‌اندازه‌ست
و در نتیجه باعث میشه
ظرف وسط body قرار بگیره
یعنی درواقع وسط مرورگر
پس اگه ذخیره کنیم می‌بینید که درست کار می‌کنه
عالیه
این فوق‌العاده‌ست
و وقتی اندازه مرورگر رو تغییر بدیم
می‌بینیم که فاصله‌های چپ و راست
بزرگ‌تر می‌شن و درواقع بهمون این توهم رو میدن
که صفحه کاملاً وسط قرار گرفته
محفظه (container) وسط‌چین شده
خب اگه الان اینو بررسی کنم و برم روی کانتینر
اینجا می‌بینم که مارجین الان
۱۸۰ تا از هر دو طرفه
و اگه تغییر اندازه بدم
می‌بینید که حالا میشه مثلاً
۷۲۵ از هر طرف
پس دوباره دو طرفش مساویه
چون روی هر دو طرف auto هست
و auto یعنی مرورگر
خودش به طور خودکار عرض رو محاسبه می‌کنه
خب
اینجا درواقع می‌خوام این ۸۰۰ پیکسل باشه
ولی قبلش یکم کوچیک‌تر گذاشتمش
چون اگه اینطوری بذاریم
دیگه هیچی درست دیده نمیشه
پس به نظر نمیاد که وسط باشه
ولی اگه اندازه پنجره رو بزرگتر کنیم
حالا این ستون کاملاً قشنگ وسط‌چین میشه
درسته
پس این یه ترفند خیلی خوبه
و یادمه اون موقع‌ها بیشتر از ۱۵ سال پیش
خیلی خوشحال شدم وقتی این ترفند رو کشف کردم
خب برای اینکه جمع‌بندی کنیم
می‌تونیم اینو به‌صورت shorthand هم بنویسیم
که درواقع رایج‌تر هم هست
پس مارجین بالا و پایین الان صفره
و چپ و راست auto هست
که این مقدار دوم shorthand میشه
پس می‌تونیم اینو پاک کنیم
و خب دوباره تست کنیم
و همونطور که انتظار میره همونطوری کار می‌کنه
درسته
و با این دیگه این ترفند خوب رو تموم کردیم
و درواقع این بخش رو هم
از مبحث مدل جعبه‌ای به پایان رسوندیم
و این یعنی حالا آماده‌ایم
برای بخش بعدی چالش کدنویسی
پس بعد از اینکه اینو مرور کردید
و شاید کل فایل رو هم یه نگاه انداختید که ببینید
الان بعد از این بخش به چه شکلی دراومده
وقتی با این کار تموم شدید
بریم سراغ ویدیوی بعدی
و چالش کدنویسی بعدی رو شروع کنیم
پس اونجا می‌بینمتون