چیدمان افقی المان با margin در CSS
با کمک ویژگی margin، می توان المان را در راست، مرکز و چپ قرار داد.
با استفاده از:
- ویژگی margin-right: auto; المان چپ چین
- ویژگی های margin-right: auto; margin-left: 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; المان نسبت به والد چپ چین می شود.
right: 0px;
left: 0px;
position: absolute;
right: 0;
نکته: ویژگی absolute، المان را از موقعیت عادی خود جا به جا می کند و ممکن است با المان های دیگر همپوشانی رخ دهد.
نکته: برای اطلاعات بیشتر، به آموزش ویژگی position در CSS مراجعه کنید.
راست چین و چپ چین کردن المان با float در CSS
یکی دیگر از روش های مرتب سازی المان ها، استفاده از ویژگی float می‌باشد.
با استفاده از:
- ویژگی float: right; المان نسبت به والد راست چین
- ویژگی float: left; المان نسبت به والد چپ چین می شود.
float: left;نکته: برای اطلاعات بیشتر، به آموزش ویژگی float در CSS مراجعه کنید.
وسط چین کردن عمودی با padding در CSS
برای وسط چین کردن عمودی یک المان یا محتوای آن، می‌توانیم از ویژگی padding استفاده کنیم.
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 مراجعه کنید.
خلاصه درس
در این درس با چیدمان المان ها (Align Elements) در CSS:
- چیدمان افقی المان با margin
- راست چین و چپ چین کردن المان با absolute
- راست چین و چپ چین کردن المان با float
- وسط چین کردن عمودی با padding
- قرار دادن محتوا در مرکز المان
- چیدمان المان با flexbox
آشنا شدیم.
احسان اسلامی
