ویژگی text-align در CSS

text-align Property

ویژگی text-align در CSS جهت گیری محتوا را داخل عناصر بلاک (display:block) و جدول (table) مشخص می کند.

نحوه نوشتار

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

مقادیر

right​

محتوای inline در عنصر به لبه سمت راست جهت دهی می شود.

left​

محتوای inline در عنصر به لبه سمت چپ جهت دهی می شود.

center​

محتوای inline در عنصر به قسمت وسط جهت دهی می شود.

justify​

محتوای inline (متن) از سمت راست و چپ به سمت لبه ها میچسبد و این کار با افرودن واصله بین کلمات اتفاق می افتد، بجز سطر آخر.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

 <div class="wrapper">
    <h4>text-align: right</h4>
    <p class="p1">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
    </p>
    <hr />
    <h4>text-align: left</h4>
    <p class="p2">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
    </p>
    <hr />
    <h4>text-align: center</h4>
    <p class="p3">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
    </p>
    <hr />
    <h4>text-align: justify</h4>
    <p class="p4">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
    </p>
</div>

css

.wrapper {
    max-width: 450px;
    margin: 0 auto;
    background-color: #ffd0d7;
    padding: 15px;
    direction: rtl;
    font-family: "Segoe UI";
}
h4 {
    text-align: center;
    color: dodgerblue;
    margin: 0;
}
.p1 {
    text-align: right; 
}
.p2 {
    text-align: left; 
}
.p3 {
    text-align: center; 
}
.p4 {
    text-align: justify; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.