آموزش وسط چین کردن المان در CSS

آموزش وسط چین کردن المان در CSS

مشخصات مقاله

آموزش وسط چین کردن المان در CSS

فرقی ندارد شما قالب وب سایت تان را توسط فریم ورک های CSS مانند بوت استرپ طراحی کنید یا خودتان از ابتدا کدنویسی کنید. داشتن یک دانش ابتدایی از html و css ضروری است. زیرا امکان این را خواهید داشت که قالب وب سایت را شخصی سازی کنید.

یکی از چالش انگیزترین مباحث در شخصی سازی کدهای html و css ترازبندی یک المان در داخل المان دیگر است. در این مقاله می خواهیم کاربردی ترین موضوع در این زمینه را بررسی کنیم و راه های پیشنهادی را ارائه دهیم.

موضوع این مقاله وسط چین کردن تگ div در css است. (در راستای افقی، عمودی و هر دو)

حالات مختلف وسط چین کردن المان:

شما می توانید به روش های مختلف یک div را توسط استایل های css وسط چین کنید. وسط چین کردن افقی (horizontal) ساده ترین روش هاست که چالش خاصی ندارد و با یک استایل قابل پیاده سازی است. وسط چین کردن عمودی یک div (vertical) حالت دوم می باشد که چالش بیشتری نسبت به حالت افقی دارد. در نهایت اگر بخواهیم یک المان را داخل المان دیگر از هر دو جهت افقی و عمودی وسط چین کنیم، چالش انگیز خواهد بود که در این مقاله راه حلی برای تمام این حالات بیان خواهیم کرد.

1- وسط چین کردن div بصورت افقی:

فرض کنید می خواهیم مطابق تصویر زیر یک div را که دارای یک حاشیه زردرنگ است را از لحاظ افقی وسط چین کنیم.

وسط چین کردن div بصورت افقی

یادآوری: خاصیت padding در css برای درج فاصله داخلی در المان های html بکار می رود و خاصیت margin برای تعریف فاصله خارجی المان های html بکار می رود.

کد html این مثال:

<div class="center">

  <p>This div takes up the width specified in CSS and the remaining space is split equally between the two margins.</p>

</div>

کد css این مثال:

.center {

  margin: auto;

  width: 60%;

  border: 5px solid #FFFF00;

  padding: 10px;

}

2- وسط چین کردن div بصورت عمودی:

فرض کنید می خواهیم المان div را داخل المان والدش بصورت عمودی وسط چین کنیم.

برای انجام اینکار باید از خاصیت های موقعیت (position properties) در css استفاده کنیم. در حالت وسط چین نمودن المان در محور عمودی با استایل های left و top و transform کار خواهیم داشت.

برای شروع موقعیت دهی المان ابتدا پوزیشن آن را بصورت قطعی یا absolute تعریف می کنیم. سپس خاصیت left و top آن را برابر 50% در نظر می گیریم. با اینکار به مرورگر اعلام می کنیم موقعیت div را از سمت بالا و چپ صفحه 50% تعریف کند. یعنی وسط صفحه نسبت به بالا و چپ صفحه قرار گیرد.

اما پس از تعریف استایل های فوق تصویر خروجی به شکل زیر خواهد شد:

2- وسط چین کردن div بصورت عمودی

مشاهده می شود که div بدرستی در وسط صفحه قرار نگرفته است. در واقع از لحاظ افقی تراز نمی باشد. برای رفع این مشکل و وسط چین کردن المان از هر دو جهت افقی و عمودی باید خاصیت transform را نیز دخیل کنیم.

9 خاصیت مرتبط با transform در css داریم. ما برای وسط چین شدن المان دلخواه خود از خاصیت translate در راستای محور X ها و Y ها استفاده خواهیم کرد. به کد CSS نهایی دقت کنید:

کد CSS:

.center {

  position: absolute;

  left: 50%;

  top: 50%;

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

  border: 5px solid #FFFF00;

  padding: 10px;

}

خروجی کار به شکل زیر خواهد شد:

ترازبندی وسط

تا الان توانستیم یک DIV را دقیقا وسط صفحه نمایش دهیم. در بخش بعدی می خواهیم وسط چین شدن المان را توسط flexbox انجام دهیم:

وسط چین شدن div توسط flexbox:

بوسیله استایل flexbox می توان یک div را داخل یک div دیگر وسط چین نمود. فلکس باکس یک روش عالی است برای ترازبندی المان ها در صفحات html. دیگر نیازی نیست نگران اندازه گیری margin المان از اطراف صفحه باشیم. اما باید در هنگام تعریف flexbox به نکاتی توجه کنید:

برای وسط چین کردن یک المان (بصورت افقی و عمودی) با استفاده از قابلیت flex-box ، باید ابتدا خاصیت ارتفاع المان html و المان والد تگ موردنظر را برابر 100% تعریف کنیم. سپس باید خاصیت display المان والد را برابر flex در نظر بگیریم. سپس خاصیت های align-items و justify-content را برابر center تعریف کنیم. با تعریف این استایل ها به مرورگر می گوییم المان داخلی والد را در جهات افقی و عمودی وسط چین کند. به کد زیر توجه کنید:

کد html:

<div class="parent">

  <div class="center"></div>

</div>

کد css:

html,

body {

  height: 100%;

}

.parent {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.center {

  background-color: #FFFF00;

  width: 200px;

  height: 200px;

}

خروجی کار در تصویر زیر مشخص است:

وسط چین شدن المان توسط flex

0/5 (0 نظر)

اطلاعات مقاله

آموزش وسط چین کردن المان در CSS

فرم ارسال دیدگاه درباره

آموزش وسط چین کردن المان در CSS

دیدگاه کاربران درباره

آموزش وسط چین کردن المان در CSS

دیدگاهی وجود ندارد