آموزش چیدمان المان ها در CSS | آموزش کامل + نمونه کد

قبلی بعدی

چیدمان افقی المان‌ با margin در CSS

با کمک ویژگی margin می توان المان را در راست، مرکز و چپ قرار داد. با استفاده از:

ویژگی margin-right: auto; المان چپ چین
ویژگی های margin-right: auto; margin-left: auto; المان وسط چین
ویژگی margin-left: auto; المان راست چین می شود.

margin-right: auto;

margin-right: auto;
margin-left: auto;

margin-left: auto;

برای تغییر چیدمان المان با ویژگی margin باید:

ویژگی display المان از نوع block باشد.
عرض المان کوچک تر از عرض المان والد باشد.

نکته: برای اینکه یک المان با کمک margin جا به جا شود حتما باید المان مورد نظر کوچک تر از والد باشد. در صورت هم اندازه بودن المان فرزند با والد دیگر فضایی برای جا به جا شدن المان وجود ندارد.

margin: auto;

display: block;
margin-left: auto;
margin-right: auto;

نکته: برای اطلاعات بیشتر به آموزش ویژگی margin در CSS مراجعه کنید.

نکته: برای چیدمان متن به آموزش چیدمان متن در CSS مراجعه کنید.

راست چین و چپ چین المان‌ با absolute در CSS

برای چپ چین یا راست چین کردن المان ها می توان از مقدار absolute ویژگی postion استفاده کرد. با استفاده از:

ویژگی right: 0; المان نسبت به والد راست چین
ویژگی left: 0; المان نسبت به والد چپ چین می شود.

position: absolute;
right: 0px;

position: absolute;
left: 0px;

position: absolute;
right: 0;

نکته: ویژگی absolute المان را از موقعیت عادی خود جا به جا می کند و ممکن است با المان های دیگر همپوشانی رخ دهد.

نکته: برای اطلاعات بیشتر به آموزش ویژگی position در CSS مراجعه کنید.

راست چین و چپ چین المان‌ با float در CSS

یکی دیگر از روش های مرتب‌سازی المان‌ها استفاده از ویژگی float می‌باشد. با استفاده از:

ویژگی float: right; المان نسبت به والد راست چین
ویژگی float: left; المان نسبت به والد چپ چین می شود.

float: left;

float: right;

float: left;

نکته: برای اطلاعات بیشتر به آموزش ویژگی float در CSS مراجعه کنید.

وسط چین کردن عمودی با padding در CSS

برای وسط چین کردن عمودی یک المان یا محتوای آن، می‌توانید از ویژگی padding استفاده کنید.

این محتوا (content) به صورت عمودی وسط چین است.

padding-top: 70px;
padding-bottom: 70px;

قرار دادن محتوا در مرکز المان CSS

padding-top: 70px;
padding-bottom: 70px;
text-align: center;

چیدمان المان‌ با flexbox در CSS

با استفاده از flexbox، می توان چیدمان المان و محتوا المان را مدیریت کرد.

این محتوا با استفاده از ویژگی flex وسط چین شده است.

display: flex;
justify-content: center;
align-items: center;

نکته: برای اطلاعات بیشتر به آموزش ویژگی flex در CSS مراجعه کنید.

خلاصه درس

در این درس با چیدمان المان به کمک:

ویژگی margin، position و float
وسط چین کردن عمودی و افقی با padding
و ویژگی flexbox

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی