آموزش وسط چین کردن آیتم های 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 همراه باشید.