آموزش سی اس اس CSS

وسط چین کردن المان ها

برای وسط چین کردن المان های بلاک مانند div از margin: auto استفاده کنید.

با تعیین عرض برای المان مانع از این خواهید شد که المان به لبه کانتینر کشیده شود.

المان عرضی تعیین شده را خواهد گرفت و فضای باقی مانده بصورت برابر بین دو حاشیه سمت چپ و راست تقسیم خواهد شد، همانند مثال زیر:

 
.center {
    margin: auto;
    width: 50%;
    border: 2px solid #446cb2;
    padding: 10px;
}
 

نکاتی که باید در ذهن داشته باشید

اگر پراپرتی width تعیین نشده باشد یا مقدار آن 100% باشد، وسط چین کردن المان های بلاک هیچ تاثیری نخواهد داشت.

وسط چین کردن متن

برای وسط چین کردن متن داخل یک المان از text-align: center استفاده کنید.

 
.center{
    text-align: center;
    border: 2px solid #446cb2;
}
 

برای دیدن مثال های بیشتر درمورد چیدمان متن فصل CSS Text مطالعه کنید.

وسط چین کردن تصویر

برای وسط چین کردن تصویر، نحوه نمایش تصویر را block کرده و مارجین چپ و راست آنرا auto کنید.

 
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
 

چپ چین و راست چین کردن - با استفاده از position

یکی از شیوه های چیدمان المان ها استفاده از position: absolute

 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 2px solid #446cb2;
    padding: 10px;
 

نکاتی که باید در ذهن داشته باشید

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

چپ چین و راست چین کردن - با استفاده از float

شیوه دیگر چیدمان المان ها استفاده از پراپرتی float است

 
.right {
    float: right;
    width: 300px;
    border: 2px solid #446cb2;
    padding: 10px;
}
 

نکاتی که باید در ذهن داشته باشید

اگر المان درونی بلند تر از المان بیرونی باشد و float شده باشد، از کانتینر خود بیرون میزند. شما میتوانید با هک claerfix این مشکل را برطرف کنید. برای دیدن هک clearfix فصل float and clear را مطالعه نمایید

وسط چین عمودی - با استفاده از padding

در CSS به شیوه های مختلفی میتوان یک المان را بصورت عمودی وسط چین کرد. راحت ترین شیوه دادن padding بالا و پایین است.