صفت align و مقادیر آن. گزینه‌های فضای سفید و wrap که خط شکسته‌ها را کنترل می‌کنند

با سلام خدمت خوانندگان محترم سایت وبلاگ. در این مقاله به یادگیری اصول سبک استایل ادامه می دهیم نشانه گذاری CSSو به ویژگی های vertical-align، text-align، text-indent و برخی ویژگی های دیگر برای تزئین متن html نگاه کنید.

تراز کردن متن با CSS

بیایید با ویژگی های سبک شروع کنیم که نمایش متن را در عناصر سطح بلوک کنترل می کنند. بیا شروع کنیم با ویژگی های تراز متنکه در واقع جایگزینی برای صفت align است (برای تراز کردن محتوای عناصر html مانند پاراگراف های p استفاده می شود).

ویژگی سبک متن تراز کردنمجموعه ها تراز افقیمتنو فقط چهار مقدار ممکن دارد:

text-align: چپ | راست | مرکز | توجیه

مقادیر موجود این قانون به ترتیب تراز را تعیین می کند: چپ - به چپ، راست - به راست، مرکز - به مرکز و توجیه - به عرض صفحه (چپ و راست همزمان با افزایش فاصله بین کلمات). به عنوان مثال، متن این مقاله با استفاده از قانون text-align: justify با عرض صفحه (اگر متوجه شده اید که در سمت چپ و راست دارای مرزهای زوج است) تراز شده است.

به طور پیش فرض، تراز افقی سمت چپ است، بنابراین نیازی به تعیین text-align:left ندارید، مگر اینکه عناصر والد تراز متفاوتی را مشخص کنند.

نمونه های استفاده از املاک:

p (Text-align: justify)
h1 (تراز متن: مرکز)

ویژگی CSS بعدی متن شناسهمجموعه ها تورفتگی برای خط قرمزبه عنوان مثال برای متن در تگ پاراگراف p. این قانون، مانند text-align، فقط برای عناصر در سطح بلوک اعمال می شود. نحو:

تورفتگی متن:<отступ>

مقادیر تورفتگی مطلق و نسبی در اینجا مجاز هستند. مقادیر مطلق (px - پیکسل، em، ex و غیره) را می توان هم با علامت مثبت و هم با علامت منفی مشخص کرد. ارزش نسبیمعمولاً به صورت درصد (%) داده می شود. مقدار نسبی از عرض ناحیه ای که برای متن رزرو شده است محاسبه می شود. بنابراین، قانون css text-indent:50% خط قرمز را برابر با نصف طول این خط تعیین می کند. تورفتگی پیش‌فرض «خط قرمز». صفر. مثال:

p (شناسه متن: 10 پیکسل؛ )

در مرحله بعد، خاصیت تراز عمودی را در نظر بگیرید تراز عمودی. این ویژگی برای همه قابل استفاده است عناصر htmlو تقریباً برای همه به معنای همسویی با یکدیگر است عناصر درون خطیبا متن نسبت به خط پایه آنها. علاوه بر تگ های جدول td و th که در آن تمام مطالب به صورت عمودی تراز خواهند شد. نحو:

عمودی تراز: خط پایه|زیر|فوق العاده|بالا|متن-بالا|وسط|پایین|متن-پایین|<величина>

بیایید به هر مقدار با جزئیات بیشتری نگاه کنیم:

• خط مبنا - تراز بخشی از متن در امتداد خط مبنا عنصر والد. این پیش فرض است.
• قطعه متن فرعی به صورت نمایش داده می شود زیرنویسیا زیرنویس عنصر والد.
• فوق العاده - یک قطعه متن به عنوان بالانویس یا بالانویس برای عنصر والد نمایش داده می شود.
• بالا - تراز قطعه متن به لبه بالایی عنصر والد.
• text-top - تراز قطعه به لبه بالای متن عنصر والد.
• وسط - تراز کردن مرکز قطعه متن به مرکز عنصر والد.
• پایین - تراز قطعه متن به لبه پایین عنصر والد.
• text-bottom - قطعه را با لبه پایین متن عنصر والد تراز کنید.

در شکل زیر رفتار قطعات تست با مقادیر مختلف ویژگی vertical-align را در مرورگر مشاهده می کنید. اینترنت اکسپلورر 11:

علاوه بر مقادیر بالا می توانید مشخص کنید مقادیر عددی. بنابراین، قانون css vertical-align:0 به معنای vertical-align:baseline است. و قانون vertical-align:10px متن را 10 پیکسل به سمت بالا از خط پایه حرکت می دهد. برای جابجایی متن به پایین، مقدار باید با منهای مشخص شود.

شیفت را نیز می توان تنظیم کرد واحدهای نسبیاندازه گیری ها، به عنوان مثال در em و در ex یا به صورت درصد.

برای چیدمان عمودیمحتویات سلول های جدول در حالت عمودی باید از مقادیر استفاده کند:

• بالا - برای تراز کردن محتوا با مرز بالای سلول.
• پایین - برای تراز کردن محتوا با مرز پایین سلول.
• وسط - برای تراز کردن با مرکز سلول (به طور پیش فرض استفاده می شود).

برای موفقیت نتیجه مطلوب، معمولاً باید آزمایش کنید معانی مختلفویژگی های سبک عمودی تراز کردن متعدد مقادیر ممکننتایج بسیار متفاوتی را در موارد مختلف می دهد.

گزینه‌های فضای سفید و wrap که خط شکسته‌ها را کنترل می‌کنند

در ردیف بعدی پارامتر فضای سفید قرار دارد که وظیفه نمایش کاراکترهای فضای خالی در صفحه html را بر عهده دارد.

همانطور که می دانیم، به طور پیش فرض، مرورگر همه موارد متوالی را ترکیب می کند کاراکترهای فضای خالی: فاصله ها، شکست های خط و کاراکترهای جدول بندی - در یک فاصله. یک استثنا برچسب زدن

، متن قرار داده شده در آن به همین صورت با تمام فاصله ها نمایش داده می شود.

ویژگی فضای سفید دارای نحو زیر است:
فضای سفید: معمولی|پیش|نوراپ|پیش بسته بندی|پیش خط
واضح است که مقدار نرمال به طور پیش فرض استفاده می شود و همه چیز را همانطور که در بالا توضیح داده شد، ترک می کند، تمام فضاهای متوالی در یک ترکیب می شوند و خطوط شکست به طور خودکار تنظیم می شوند.
استفاده از ارزش 
در هنگام اعمال تگ یک قیاس کامل خواهد بود 
مرورگر صفحه را با توجه به همه نمایش می دهد فضاهای اضافیو خط تیره همانطور که توسط توسعه دهنده اضافه شده است.  اگر خط متن خیلی طولانی باشد، اضافه خواهد شد نوار افقیطومار.

مقدار nowrap از بسته بندی خطوط توسط مرورگر جلوگیری می کند و متن به صورت یک خط نمایش داده می شود.  تنها چیز اضافه کردن یک برچسب است 
متن را به خط جدید.
مقدار pre-wrap تمام توالی فاصله‌ها و شکستگی‌های خط را حفظ می‌کند، اما اگر خط در ناحیه مشخص‌شده قرار نگیرد، مرورگر به‌طور خودکار متن را در یک خط جدید می‌پیچد.
خوب، مقدار پیش خط، فضاها را به یک فضای واحد تبدیل می‌کند، خطوط جدید حفظ می‌شوند و مرورگر ممکن است خطوطی را که خیلی طولانی هستند برای جلوگیری از پیمایش افقی بشکند.
مثال استفاده:
p (فضای سفید: pre;)
بعد، در نظر بگیرید پارامتر word-wrap، که از شما می خواهد تعیین کنید که آیا انتقال داده شود یا خیر کلمات طولانی، که در منطقه داده شده مناسب نیستند.  این ویژگی اغلب استفاده نمی شود، اما گاهی اوقات نمی توانید بدون آن انجام دهید:
word-wrap: عادی|گسست کلمه
مقدار عادی به مرورگر می‌گوید که متن فقط در فاصله‌ها می‌تواند شکسته شود، و این رفتار عادی مرورگر است.  و مقدار break-word به مرورگر اجازه می دهد تا خطوط شکست را در کلمات وارد کند.  مثال:
p ( word-wrap: break-word; )
گزینه های سایه متن - ویژگی text-shadow
برای دوستداران تزئینات مختلف در استاندارد CSS3، امکان تنظیم سایه برای متن فراهم شد.  استفاده صحیح از ویژگی text-shadow به شما امکان می دهد تا به طور قابل توجهی احیا کنید صفحه وب.  نحو:
text-shadow: هیچ |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
مقدار none افزودن سایه به متن را غیرفعال می کند و به طور پیش فرض تنظیم می شود.
رنگ سایهدر هر فرمت CSS موجود مشخص شده است و نیست پارامتر اجباری.  به طور پیش فرض، رنگ سایه همان رنگ متن است.
افست سایه افقیرا می توان در هر واحد CSS پشتیبانی شده تنظیم کرد.  اگر مقدار مثبت باشد، سایه قرار می گیرد سمت راست متن، با منفی - به سمت چپ. مقدار صفرسایه را درست زیر متن قرار می دهد و تنها در صورتی معنا پیدا می کند که سایه تاری تنظیم شده باشد.
افست عمودی سایههمچنین می تواند در هر واحد CSS پشتیبانی شده تنظیم شود.  یک مقدار مثبت سایه را به زیر متن منتقل می کند، یک مقدار منفی آن را بالاتر می برد.  مقدار صفر سایه را مستقیماً زیر متن قرار می دهد.
در هر واحد اندازه گیری، و شعاع تاری سایه.  هر چه این مقدار بزرگتر باشد، سایه گسترده تر می شود و بیشتر صاف می شود.  اگر این گزینه تنظیم نشده باشد، مقدار تاری صفر در نظر گرفته می شود.  از آنجایی که الگوریتم هموارسازی معمولا دارد مرورگرهای مختلفمتفاوت است، ظاهر سایه ممکن است بسته به مرورگر کمی متفاوت باشد.
یک مثال را در نظر بگیرید:
پ( 
text-shadow: قرمز 1px 1px 2px 
اندازه فونت: 2em 

}
و به این صورت است که متن پاراگراف p با استفاده از آن به نظر می رسد این قانونسبک در اینترنت اکسپلورر 11:

اینجاست که مقاله را تمام می کنم.  برای کسب اطلاعات بیشتر در مورد ویژگی های CSSفراموش نکنید که در به روز رسانی های وبلاگ مشترک شوید و مقالات را از بخش "" بخوانید.  به زودی میبینمت!
درود دوستان  امروز در مورد آن صحبت خواهیم کرد تگ پاراگراف و صفت alignment.  به طور کلی، تمام محتوای یک صفحه باید به پاراگراف تقسیم شود.  محتوای پاراگراف بین تگ ها نوشته می شود 
متن…
.  وقتی 2 پاراگراف متوالی را نمایش می دهیم، یک میدان نامرئی بین آنها تشکیل می شود که آنها را از یکدیگر دور می کند.  برچسب است برچسب بلوکبنابراین آنها تمام عرض صفحه را اشغال می کنند.

به عنوان مثال، بیایید صفحه ای با کد زیر در نظر بگیریم:

 

 
 
 
 
 
 

 پراگراف اول: Lorem Ipsum به سادگی متن ساختگی صنعت چاپ و حروفچینی است.  لورم ایپسوم از دهه 1500، زمانی که یک چاپگر ناشناخته یک گالری از نوع را گرفت و آن را به هم زد تا یک کتاب نمونه تایپ بسازد، متن ساختگی استاندارد صنعت بوده است.
 

 پاراگراف دوم:این یک واقعیت ثابت شده است که خواننده هنگام نگاه کردن به صفحه‌آرایش، از محتوای قابل خواندن آن پرت می‌شود.  نکته استفاده از Lorem Ipsum این است که در مقایسه با استفاده از "Content here, content here" توزیع حروف کم و بیش نرمال دارد و آن را شبیه به انگلیسی خواندنی می کند.
 

بیایید ببینیم این مورد در مرورگر چگونه به نظر می رسد:
 


احتمالاً متوجه شده اید که یک برچسب در کد صفحه وجود دارد قوی،این تگ متن را پررنگ می کند.
ویژگی های برچسب
برای هر تگ، در برخی موارد حتی می‌توانید ویژگی‌هایی را مشخص کنید.  از طریق ویژگی، به مرورگر می گوییم که دقیقا چگونه این یا آن عنصر را در صفحه نمایش دهد.
ویژگی در داخل پرانتز تگ افتتاحیه مشخص شده است و دارای نحو زیر است: ویژگی_name = "ارزش"
صفت تراز
به عنوان مثال، ما یک پاراگراف در صفحه داریم و می خواهیم محتوای آن را تراز کنیم.  برای این کار داخل تگ افتتاحیه یک ویژگی می نویسیم تراز کردن،که وظیفه تراز کردن محتوای داخل پاراگراف را بر عهده دارد و آن را روی یک مقدار قرار می دهد.
محتوای پاراگراف


این ویژگی دارای 4 مقدار است:
1. چپ- محتوا را در سمت چپ تراز می کند.  این مقدار به طور پیش فرض است.  یعنی اگر صفت را برای پاراگراف مشخص نکنیم تراز کردن، سپس محتوای داخل پاراگراف به طور پیش فرض چپ چین می شود.  این را می توان در مثال قبلی مشاهده کرد.
2-درست- محتوا را به سمت راست تراز می کند.

 
متن…
در مرورگر به این صورت است:
 

3. مرکز- محتوا را با مرکز صفحه تراز می کند.

 
متن…
 

4. توجیه کنید- محتوا را با عرض صفحه تراز می کند.

 
متن…
 

خلاصه درس: 
امروز یاد گرفتیم چی پاراگرافدر html  پاراگراف ها اغلب در html استفاده می شوند.  ما همچنین یاد گرفتیم که ویژگی تگ چیست.  و صفت alignment را یاد گرفت تراز کردنکه می تواند یکی از مقادیر زیر را داشته باشد: سمت چپ (پیش فرض)درست،مرکز،توجیه.
شرح
 
یک بلوک از متن را با لبه تراز می کند.
به جای این ویژگی باید از Styles استفاده شود
 
نحو
 
ارزش های
left متن را در سمت چپ تراز می کند.  در این حالت، خطوط متن به سمت چپ تراز می شوند و لبه سمت راست در یک "نردبان" قرار دارد.  این روش تراز بندی در وب سایت ها محبوب ترین است، زیرا به کاربر این امکان را می دهد که به راحتی به دنبال یک خط جدید باشد و به راحتی متن بزرگ را بخواند.  center متن را با مرکز تراز می کند.  متن به صورت افقی در پنجره مرورگر یا ظرفی که بلوک متن در آن قرار دارد قرار می گیرد.  به نظر می رسد که خطوط متن بر روی یک محور نامرئی که از مرکز صفحه وب می گذرد، قرار گرفته اند.  یک روش ترازبندی مشابه به طور فعال در سرفصل‌ها و زیرنویس‌های مختلف مانند زیرنویس‌ها استفاده می‌شود و ظاهر رسمی و محکمی به طراحی متن می‌دهد.  در تمام موارد دیگر، تراز وسط به ندرت استفاده می شود آن دلیلکه خواندن حجم زیادی از چنین متنی ناخوشایند است.  راست متن را در سمت راست تراز می کند.  این روش هم ترازی به عنوان یک آنتاگونیست با نوع قبلی عمل می کند.  یعنی، خطوط متن به سمت راست تراز می شوند، در حالی که سمت چپ "پاره" باقی می ماند.  با توجه به اینکه لبه سمت چپ تراز نیست، یعنی خواندن خطوط جدید با آن شروع می شود، خواندن چنین متنی دشوارتر از تراز چپ است.  بنابراین، تراز سمت راست معمولاً برای سرفصل های کوتاه که بیش از سه خط نباشد استفاده می شود.  ما سایت های خاصی را در نظر نمی گیریم که متن باید از راست به چپ خوانده شود، در آنجا امکان پذیر است روش مشابهتراز به کار خواهد آمد.  اما در کجای کشور ما چنین سایت هایی را دیده اید.  justify Justify که به معنای چپ و راست توجیه شده همزمان است.  برای انجام این عمل، مرورگر در این حالت بین کلمات فاصله اضافه می کند. 
مقدار پیش فرض
 
مثال.  تراز متن


 
 
 
 
 
 
Duis te feugifacilisi.  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au tegue duisdola.  Ut wisi enim ad minim veniam، quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.  Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
 

مرورگرها: دسکتاپ موبایل ?

اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
1

1

1

1

1


اندروید
فایرفاکس موبایل
اپرا موبایل
سافاری موبایل
1

1

6

1


✖

مرورگرها
نماد زیر در جدول مرورگر استفاده می شود.
- این عنصر به طور کامل توسط مرورگر پشتیبانی می شود.
- عنصر توسط مرورگر درک نمی شود و نادیده گرفته می شود.
- ممکن است در حین کار ظاهر شود خطاهای مختلف، یا عنصر با رزرو پشتیبانی می شود.
عدد نشان دهنده نسخه مرورگری است که عنصر از آن پشتیبانی می شود.
برای تصاویر، استانداردها یک تراز پیش‌فرض را با توجه به متن و سایر تصاویر در یک خط مشخص نمی‌کنند - همیشه نمی‌توان پیش‌بینی کرد که این مؤلفه‌ها چگونه به نظر می‌رسند.1 در اسناد HTML، تصاویر معمولاً «در خط» مرتب می‌شوند. تنها با یک خط متن  همانطور که مرسوم است در رسانه چاپی رسانه های جمعیمتن آنها را "پیچیده" می کند، به طوری که چندین خط می تواند در مجاورت تصویر باشد، و نه یک خط.
خوشبختانه، سازندگان سند تا حدودی بر نحوه تراز کردن تصاویر با متن اطراف از طریق ویژگی align برچسب کنترل دارند. .  استانداردهای HTML و XHTML پنج مقدار را برای ویژگی align تعریف می کنند: چپ، راست، بالا، وسط، پایین.  مقادیر چپ و راست باعث می شود که متن در اطراف تصویر بپیچد و به لبه مربوطه تغییر کند.  سه مورد باقی مانده تصویر را در تراز می کنند جهت عمودیدر رابطه با متن اطراف
همه مرورگرهای محبوب، از جمله اپرا، فایرفاکس، نت اسکیپ و اینترنت اکسپلورر، موافق هستند که ویژگی align=bottom پیش‌فرض برای تراز عمودی است و تصاویر را به طور مساوی بالاتر از بالاترین کاراکتر در یک خط متن قرار می‌دهند. شکل 2 را ببینید.  15.11.
در همان زمان، مرورگرها در مورد نحوه قرار دادن تصاویر با ویژگی align=middle نسبت به متن اختلاف نظر دارند.  روی انجیر  شکل 5.11 نشان می دهد که Netscape و Opera تصویر را بر اساس خط وسط متن قرار می دهند.  در مورد مرورگرهای اینترنت اکسپلورر
برنج.  5.11.  تراز استاندارد تصاویر جاسازی شده
برنج.  5.12.  اینترنت اکسپلورر و فایرفاکس خط مرکزی تصویر را با خط مرکزی بلندترین عنصر تراز می کنند، نه خط مرکزی متن
و فایرفاکس، تصویر را در وسط بلندترین عنصر قرار می دهند که لزوماً یک عنصر متنی نیست (شکل 5.12).
علاوه بر این، مرورگرها کم و بیش از پنج ویژگی تراز عمودی اضافی برای تصاویر پشتیبانی می‌کنند: texttop، center، absmiddle، baseline و absbottom (اگر معنی آنها را حدس زده‌اید، دست خود را بالا ببرید):
دستور align=texttop به مرورگر می‌گوید که لبه بالایی تصویر را با لبه بالایی بلندترین عنصر متنی تراز کند. خط فعلی.  در غیر این صورت، بالا فعال است، که بالای تصویر را با بالای بلندترین عنصر، جزء متنی یا تصویر در خط فعلی تراز می کند.  اگر خط حاوی هیچ تصویر دیگری در بالای متن نباشد، texttop و top دارای همان اثر هستند.  اپرا از texttop پشتیبانی نمی کند، اما سایر مرورگرهای محبوب آن را دقیقاً طبق این توضیحات تفسیر می کنند.
اولین بار در اینترنت اکسپلورر و نت اسکیپ معرفی شد، مقدار مرکزی توسط اینترنت اکسپلورر، نت اسکیپ و فایرفاکس دقیقاً به همان روشی که مقدار میانی تفسیر می شود.  فقط فراموش نکنیم که هرکدام ارزش وسط را به شیوه خود می دانند.  Opera عبارت align=center را نادیده می گیرد.
اگر ویژگی align تگ را اختصاص دهید مقدار absmiddle، مرورگر وسط مطلق تصویر را در برابر وسط مطلق خط فعلی تنظیم می کند.  مقادیر میانی و مرکزی اینگونه کار نمی کنند، که وسط تصویر را با خط پایه خط فعلی متن تراز می کنند.  در حالی که نت اسکیپ و اپرا بین absmiddle و وسط تمایز قائل نمی شوند، فایرفاکس و اینترنت اکسپلورر از این مقادیر برای تراز انتخابی تصاویر با خطوط میانی استفاده می کنند.  به عبارت دیگر، فایرفاکس و اینترنت اکسپلورر با absmiddle به همان شیوه ای برخورد می کنند که Netscape با وسط رفتار می کند.
برنج.  5.13.  هنگام تراز کردن تصاویر با ویژگی alingn=absbottom، مرورگرها نزول را در نظر می گیرند.
پایین و پایه (پیش فرض)
مقادیر پایین و پایه همان تأثیری دارند که گویی اصلاً ویژگی alignment را وارد نکرده‌اید.  مرورگر لبه پایین تصویر را با خط پایه متن تراز می کند.  این نباید با عمل مقدار absbottom اشتباه شود، که آن قسمت‌هایی از حروف را نیز در نظر می‌گیرد که زیر خط مبنا قرار می‌گیرند.1 (اگر همچنان دست خود را بالا نگه دارید، می‌توانید آن را پایین بیاورید.)
عبارت align=absbottom به مرورگر می گوید که پایین تصویر را با پایین واقعی متن در خط فعلی تراز کند.  پایین واقعی پایین ترین نقطه متن است، شامل همه نزول ها (به عنوان مثال، قسمت پایینکاراکتر "y")، حتی اگر هیچ کدام در رشته وجود نداشته باشد.  خط مبنا در امتداد لبه پایین "v" در کاراکتر "y" اجرا می شود.  Opera، حامل استاندارد، مقدار absbottom را نادیده می گیرد، در حالی که سایر مرورگرهای محبوب آن را همانطور که توضیح داده شده است رفتار می کنند (شکل 5.13).
از بالا و وسط برای تراز کردن نمادها، گلوله های لیست و سایر تصاویر خاص با متن نزدیک استفاده کنید.  در موارد دیگر، align=bottom (به طور پیش فرض انتخاب شده) بهترین ها را به دست می آورد ظاهر.  هنگام تراز کردن یک یا چند تصویر در هر خط، مقدار مشخصه ای را انتخاب کنید که بهترین ظاهر را برای سندتان به شما بدهد.
مشخصات
 
HTML:
 
3.2

 
4.01

 
5.0

 
XHTML:
 
1.0

 
1.1

شرح
 
تراز کردن محتوای ظرف 
روی لبه.

 
نحو
 
...
 
ارزش های
center متن را با مرکز تراز می کند.  متن به صورت افقی در پنجره مرورگر یا ظرفی که بلوک متن در آن قرار دارد قرار می گیرد.  به نظر می رسد که خطوط متن بر روی یک محور نامرئی که از مرکز صفحه وب می گذرد، قرار گرفته اند.  یک روش ترازبندی مشابه به طور فعال در سرفصل‌ها و زیرنویس‌های مختلف مانند زیرنویس‌ها استفاده می‌شود و ظاهر رسمی و محکمی به طراحی متن می‌دهد.  در همه موارد دیگر، تراز وسط به ندرت استفاده می شود، زیرا خواندن حجم زیادی از چنین متنی ناخوشایند است.  left متن را در سمت چپ تراز می کند.  در این حالت، خطوط متن به سمت چپ تراز می شوند و لبه سمت راست در یک "نردبان" قرار دارد.  این روش تراز بندی در وب سایت ها محبوب ترین است، زیرا به کاربر این امکان را می دهد که به راحتی به دنبال یک خط جدید باشد و به راحتی متن بزرگ را بخواند.  راست متن را در سمت راست تراز می کند.  این روش هم ترازی به عنوان یک آنتاگونیست با نوع قبلی عمل می کند.  یعنی، خطوط متن به سمت راست تراز می شوند، در حالی که سمت چپ "پاره" باقی می ماند.  با توجه به اینکه لبه سمت چپ تراز نیست، یعنی خواندن خطوط جدید با آن شروع می شود، خواندن چنین متنی دشوارتر از تراز چپ است.  بنابراین، تراز سمت راست معمولاً برای سرفصل های کوتاه که بیش از سه خط نباشد استفاده می شود.  ما سایت‌های خاصی را در نظر نمی‌گیریم که متن باید از راست به چپ خوانده شود، جایی که ممکن است روش هم‌ترازی مشابه مفید باشد.  اما در کجای کشور ما چنین سایت هایی را دیده اید.  justify Justify که به معنای چپ و راست توجیه شده همزمان است.  برای انجام این عمل، مرورگر در این حالت بین کلمات فاصله اضافه می کند. 
مقدار پیش فرض
 
HTML 4.01 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 

 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
 

 
نتیجه این مثالنشان داده شده در شکل  یکی
 
برنج.  1. تراز کردن عناصر با ویژگی align