جهت ورود به تالار گفتمان سایت کلیک کنید

وسط چین عمودی تگ ها با پراپرتی Flex در Css3

همانطور که شما توسعه دهنگان وب میدانید , ما در CSS تابحال پراپرتی برای وسط چین کردن تگ به صورت عمودی را نداشته ایم و اکثرا با margin این کار را انجام میدادیم .

البته شاید همین الان به ذهنتون پراپرتی position خطور کرده باشه . کاملا درسته ولی این کار به صورت ترفندی میباشد و ضمنا برای این کار مجبور میشویم که به تگ مورد نظر پراپرتی position بدهیم که خود مشکلاتی را برای مت فراهم میسازد . ( برای مشاهده ترفند با position اینجا رو کلیک کنید )

در css3 پراپرتی اضافه شده به نام flex که کاربردهای فراوان و گوناگونی دارد که در اینجا فقط یکی از آن کارها که طریقه وسط چین کردن عمودی تگ ها میباشد را آموزش خواهم داد .

انشالله در آینده سعی خواهم کرد شما عزیزان را با این پراپرتی بیشتر آشنا کنم و کاربردهای دیگر آن را بیان خواهم کرد

وسط چین عمودی تگ ها با پراپرتی Flex در Css3

و اما آموزش : 

این پراپرتی میتواند فرزندان یک تگ پدر را در وسط پدر ( نسبت به بالا و پایین ) قرار دهد .

پس برای اینکار باید ابتدا یک پدر ( مثلا div ) بسازید . در اینجا مثلا کلاس vms-vcenter را به آن میدهیم:

حال مقادیر زیر را در css به آن میدهیم :

نکته 1 : چنانچه قصد وسط چین کردن تگ های فرزند به صورت افقی را هم داشتید , میتوانید مقدار خط زیر را هم به css بالا اضافه نمایید .

نکته : طبیعتا به دلیل اینکه در css بالا width و height نداریم , فرزند نمیتواند ارتفاع پدر خود را تشخیص دهد که در وسط آت قرار گیرد . پس باید به css بالا یک width و height مشخص بدهیم .

دموی آموزش

پخش اختصاصی

آموزش : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

2 پاسخ به “وسط چین عمودی تگ ها با پراپرتی Flex در Css3”

  1. علیرضا گفت:

    سلام
    شما که متخصصین میشه بگید این از چه اسکریپتی استفاده می کنه؟
    http://www.rtl-theme.com/%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%81%d8%a7%d8%b1%d8%b3%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%aa%d9%85-%d9%81%d8%a7%d8%b1%d8%b3%d8%aa-%d9%86%d8%b3%d8%ae%d9%87-%d9%81%d8%a7
    این شبیه اسکریپت تم فارست که توی همه سایت ها پیدا میشه نیست. اگر اسمشو میدونین ممنون میشم بهم کمک کنید.
    لینک سایت اصلی رو هم بدید بی زحمت.
    تشکر

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

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