مهدی عادلی فر
بنیانگذار توسینسو و برنامه نویس

آموزش وسط چین کردن آیتم های CSS به زبان ساده

چگونه آیتم ها را در css وسط چین کنیم؟ اگر شما یک طراح وب باشید شاید این مطلب برای شما چیز ساده و پیش پا افتاده ای باشد که چگونه المان ها را وسط چین کنیم. اما تکنیک هایی رو بهتون میگم که می تونید از هرکدوم برای این کار استفاده کنید. شاید با بعضی ها آشنا باشید و با بعضی ها هم نه.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

استفاده از grid+ place-items

این تکنیک به شما اجازه می دهد که آیتم ها را هم به صورت افقی و عمودی مرتب کنید. با همین دو خط که می بینید

.parent {
  display: grid;
  place-items: center;
}

خصوصیت place-items به جای دو خصوصیت justify-items و align-items باهم به کار می روند. 

استفاده از تکنیک flex+margin

روش دیگری که برای مرتب سازی آیتم ها هم به صورت عمودی و افقی به کار می رود استفاده ترکیبی از display:flex و margin:auto به شکل زیر است.

.parent {
  display: flex;
}

.child {
  margin: auto;
}

دقت کنید که کلاس child در داخل المان با کلاس parent قرار می گیرد و اگر بخواهیم که در یک عنصر آن را بیاوریم باید به شکل زیر عمل کنیم.

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

حال شما در طراحی می توانید از هرکدام استفاده کنید. با وب سایت Tosinso همراه باشید.


مهدی عادلی فر
مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.

17 تیر 1400 این مطلب را ارسال کرده

نظرات