استفاده از FlexBox  برای جایگذاری عمودی در  مرکز
1397/02/24 16:44 , بهزاد ناظمی

استفاده از FlexBox برای جایگذاری عمودی در مرکز

 جایگذاری عمودی در مرکز (vertically centered) محتویات، کاری است که مدتها در وب مورد نیاز است، اما همیشه به نظر مشکل تر از آن که هست بنظر می رسید. ما در ابتدا از جداول برای انجام این کار استفاده میکردیم و سپس به ترفندهای CSS و جاوا اسکریپت روی آوردیم، زیرا طرح جدول به طرز بی رحمانه ای ناکارآمد بود.

 با این حال به نظر می رسید که جداول ساده ترین و مطمئن ترین روش برای انجام جایگذاری عمودی در مرکز هستند. هنگامی که ویژگی vertical-align در CSS  معرفی شد، من فوق العاده هیجان زده بودم، اما به سرعت متوجه شدم که معمولا آن چیزی را که مورد انتظار من بود را انجام نمیداد.

بعد از کارکردن با flexbox برای Debugger متوجه شدم که align-items: center؛ همان چیزی است که همیشه مورد نیاز است.

نمایش نمونه !

ما در اینجا نشانه گذاری HTML زیر که محتویات با ویژگی های مختلفی دارد را در نظر می گیریم:

<div class="parent">
  <div>Hello!</div>
  <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p></div>
  <div><img src="https://davidwalsh.name/wp-content/themes/punky/images/logo.png" style="display: inline;"></div>
</div>

اگر ما بخواهیم محتویات هر عنصر را به صورت عمودی در مرکز قرار دهیم، می توان از flexbox و align-items استفاده کرد تا این اتفاق بیفتد:

.parent {
    display: flex;
    align-items: center;
}

Flexbox همیشه وفادار به صرفه جویی در طراحی وب بود است، اما به نظر می رسد این بار کمی به نفع CSS کار کرده است.

 ام من خوشحالم که flexbox کابوس  طولانی ما، در زمینه جایگذاری عمودی در مرکز را حل نمود !

 

       برگرفته از : https://davidwalsh.name/vertical-center-flexbox

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات