ترازبندی (Align)

تمام روش‌های ترازبندی در CSS: وسط‌چین افقی، عمودی، Flexbox، Grid و تکنیک‌های مدرن

ترازبندی در CSS

ترازبندی (Alignment) یکی از چالشبرانگیزترین بخش‌های CSS است. روش‌های مختلفی برای وسط‌چین کردن وجود دارد.

۱. وسط‌چین افقی (Block)

/* برای عناصر block با عرض مشخص */
    .center-block {
        width: 500px;
        margin: 0 auto;
    }

۲. وسط‌چین افقی (Inline)

/* برای متن و عناصر inline */
    .parent {
        text-align: center;
    }

۳. وسط‌چین با Flexbox ⭐

/* وسط‌چین کامل — افقی و عمودی */
    .flex-center {
        display: flex;
        justify-content: center;   /* افقی */
        align-items: center;       /* عمودی */
        min-height: 100vh;
    }

۴. وسط‌چین با Grid ⭐

/* ساده‌ترین روش */
    .grid-center {
        display: grid;
        place-items: center;  /* هم افقی هم عمودی */
        min-height: 100vh;
    }

۵. وسط‌چین با Position + Transform

.parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

۶. وسط‌چین عمودی با line-height

/* فقط برای متن تک‌خطی */
    .single-line {
        height: 50px;
        line-height: 50px;  /* برابر با height */
    }

Flexbox Alignment

ویژگیتوضیحمقدارها
justify-contentمحور اصلی (افقی)flex-start, center, flex-end, space-between, space-around
align-itemsمحور متقاطع (عمودی)stretch, center, flex-start, flex-end
align-selfتراز یک آیتممثل align-items
gapفاصله بین آیتم‌ها10px

Grid Alignment

ویژگیتوضیح
justify-itemsتراز افقی آیتم‌ها
align-itemsتراز عمودی آیتم‌ها
place-itemsخلاصه هر دو
justify-contentتراز کل گرید

text-align

مقدارتوضیح
leftچپ‌چین
rightراست‌چین
centerوسط‌چین
justifyتراز از دو طرف

vertical-align

فقط برای عناصر inline و table-cell:

img { vertical-align: middle; }
    td  { vertical-align: top; }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط