اوایل یادگیری html css استاد خسروجردی که بودم برای خودم سوال بود چجور ویرگول همه بخش هاشو اورده وسط؟ یا مثلا بعضی صفحات لاگین چجوری اومدن وسط؟ خیلی برام عجیب بود... یادمه تو یکی از جلسات استاد خسروجردی تمرین داده بود و منم انجام دادم و شد این:
فقط برا اینکه ضایع نباشه یکم بهش margin دادم ولی بلد نبودم بیارم وسطِ وسطِ وسط.
سلام من دوباره اومدم پیشتون با یه پست خیلی کاربردی که معضل خیلی از تازه کارا هست پس بعد اینکه لایک کردی پستو سیو کن که داشته باشی و هروقت نیاز داشتی بیای یه سر بزنی?
توضیح: اول این توضیحو بدم که وسط قرار دادن عناصر به چند عامل مثل display و position بستگی داره و اینم اضافه کنم که بستگی داره شما عمودی بخواید وسط بذارید یا افقی یا هردو
با معروف ترین راه شروع میکنیم که باید این شرایطو داشته باشه:
اون بخش ;display: block فقط برای قشنگی بود وگرنه div دیسپلی پیشفرض block داره?
و چون فرزندش یعنی h1 دیسپلی inline داره نمیره وسط. (این از اون مواقعیه که باید بهش width بدیم و میایم ;width: fit-content میدیم و زرنگی میکنیم :)
و در نهایت کار اصلی رو میکنیم یعنی margin های افقی رو auto میکنیم
(البته میشد بنویسید margin: auto ولی خب تغییری نمیکرد) توضیح بیشتر نمیدم شما خودتون اهل فنید?
به همین راحتی Right Learn صاف رفت وسطِ وسطِ وسط صفحه?
نکته جالب: البته عناصری که display: table هم داشته باشن هم میشه با این روش وسط بردشون که اونا دیگه هیچ عرض مشخصی نمیخوان!
معرفی میکنم: یکی از بهترین روش های حال حاضر بازار => استفاده از flexbox
شرایط خاصی هم نداره فقط به عنصر پدر یعنی div ما این استایل هارو باید بدید:
فقط کافیه به عنصر پدر این دو خط استایلو بدید
البته تو این مسابقه css grid هم کم نیاورده و یه روش اورده:
شرایطش اینه که display: inline باشه
که البته تو مثال بالا این h1 میره وسط div ولی اگه پدر h1 یه چیزی مثل body باشه میره وسط صفحه. یا اگه div ما یه عرض و background-color داشته باشه میتونید واضح تر ببینید
حالا اگه بخوایم div رو بیاریم وسط (غیر استاندارد)
عملا هر عنصری که display: inline داشته باشه با text-align: center راحت میره وسط
کلا تو css به راحتی افقی، نمیشه عمودی برد وسط ولی من تو این بخش (بیشتر از) چندتا روش میگم بعدش میریم سراغ عمودی-افقی باهم.
مثلا در متن ها، یا المان های داخل table و ... میتونید با خاصیت vertical-align: middle ببریدش وسط
سخت نیست، فکر کنم همتون بدونید
با flexbox همه کار میشه کرد! چه عمودی چه افقی چه عمودی-افقی میشه هر المانی رو برد وسط فقط محدودیتی که داره اینه که باید display: flex بدی به اون ظرف کلی که یه وقتایی اگه حواست نباشه و بلد نباشی چینش رو بهم میزنه (برا کسایی میگم که فلکس باکس بلد نیستن ولی این قطعه کد رو کپی میکنن:)
دقت کنید که همه این استایل هارو به ظرف کلی دادیم:
با justify-content که آشنا هستید! فقط اومدیم flex-direction رو گذاشتیم column که تو این حالت بر اساس افق میاره وسط. (توی پرانتز بگم که خاصیت flex-end هم داره که المان رو میبره پایین پایین پایین، البته خاصیت هاش زیادن که خودش یه پست کامل میخواد)
با position هم میشه! اما با هزار بدبختی و البته بهم زدن نسبی چیدمان (flow) صفحه?♂️ ولی یه نکته مثبت داره: display اصلا براش مهم نیست ولی باید یه ارتفاع مشخصی داشته باشه که ما زرنگی میکنیم و خاصیت دوستداشتنی fit-content رو به width میدیم? بدین صورت:
یکی از بهترین و جدیدترین روش ها - توی سه خط
اول position رو relative کردیم که بتونیم تو خط بعد بهش top بدیم - حالا توی این تاپ اومدیم به اندازه نصف پدرش پایین اوردیم و بعدش تو خط سوم به اندازه ارتفاع خودش از پایین به بالا اوردیم. همین :)
راستی بعضی مرورگرهای قدیمی اینو کامل ساپورت(*پشتیبانی) نمیکنن و باید به عنصر پدر این ویژگی رو بدید:
transform-style: preserve-3d;
چی بگم؟ بریم سراغ عکس
همونطور که واضحه باید عرض و ارتفاع مشخصی داشته باشه و position: absolute بهش میدیم و اصل کار margin هست که از همه طرف auto میکنیم
راستی top و bottom و... هم باید صفر کنید که یه وقت فاصله پیش فرض اذیت نکنه!
روش چهارم عمودی یه توضیحی درباره transform دادم و باید قائدتا بلد باشید :) با این روش هم میشه المان رو برد اون وسط وسط وسط وسط وسط وسط وسط ظرف مورد نظر
چیز خاصی نداره فقط باید بگم که دقت کنید که این استایل هارو باید به پرنت (والد یا همون پدر) المان مورد نظر باید بدید چون کلا flexbox اینطوری کار میکنه
خب بچه ها این پست هم تموم شد، فقط خیلی خیلی خوشحالم میکنید که لایک کنید و یه کامنت "ممنون کاربردی بود" بذارید. راستی ببخشید چند وقت نبودم. (توضیح خواهم داد قضیه رو)
خلاصه که حمایت کنید?? خدافظظظظظظظ تا پست بعد
