همین الان هم بنویسیم کد HTML، اما با استفاده از ظروف، علاوه بر این، اجازه دهید نه به مرکز، بلکه به سمت راست تراز کنیم.

همانطور که می بینید، همه چیز کار می کند. من به شما توصیه می کنم که مقادیر ویژگی را نیز تغییر دهید " تراز کردنبرای بررسی انواع دیگر تراز محتوای کانتینر.

راه دیگری برای تراز کردن عناصر HTML- اینها جداول هستند، اما این موضوع مستحق بحث جداگانه است، بنابراین در یکی از مقالات زیر در مورد آن صحبت خواهیم کرد.

در حال حاضر، صفحه شما باید به شکل زیر باشد:

عنوان سطح 1، تراز وسط

عنوان سطح 1، تراز راست

با احترام، میخائیل روساکوف.

P.S.اگر می خواهید بیشتر بدانید HTMLبعد به مال من نگاه کن دوره رایگانبا نمونه ای از ایجاد وب سایت در HTML:

با سلام خدمت خوانندگان محترم سایت وبلاگ. در این مقاله به بررسی اصول استایل ادامه می دهیم نشانه گذاری 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 در مشاهده کنید مرورگر اینترنت Explorer 11:

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

شیفت را نیز می توان در آن مشخص کرد واحدهای نسبیاندازه گیری ها، مانند em و ex یا درصد.

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

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

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

پارامترهای فضای سفید و 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، فراموش نکنید که در به‌روزرسانی‌های وبلاگ مشترک شوید و مقالات بخش «» را بخوانید.  دوباره می بینمت!
شرح
 
یک بلوک از متن را با لبه تراز می کند.
به جای این ویژگی باید از سبک ها استفاده شود
 
نحو
 
ارزش های
چپ متن را در سمت چپ تراز می کند.  در این حالت، خطوط متن به سمت چپ تراز می شوند و لبه سمت راست به عنوان یک نردبان مرتب می شوند.  این روش تراز بندی در وب سایت ها محبوب ترین است، زیرا به کاربر این امکان را می دهد که به راحتی به دنبال یک خط جدید بگردد و به راحتی متن بزرگ را بخواند.  مرکز متن را با مرکز تراز می کند.  متن به صورت افقی در مرکز پنجره مرورگر یا ظرفی که در آن قرار دارد قرار می گیرد. بلوک متنی.  به نظر می رسد که خطوط متن بر روی یک محور نامرئی قرار گرفته اند که از مرکز صفحه وب می گذرد.  این روش تراز کردن به طور فعال در سرفصل ها و امضاهای مختلف مانند زیرنویس ها استفاده می شود و ظاهری رسمی و محکم به طراحی متن می دهد.  در تمام موارد دیگر، تراز وسط به ندرت استفاده می شود آن دلیلکه خواندن حجم زیادی از چنین متنی ناخوشایند است.  راست متن را در سمت راست تراز می کند.  این روش هم ترازی به عنوان یک آنتاگونیست با نوع قبلی عمل می کند.  یعنی خطوط متن در لبه سمت راست تراز می شوند، در حالی که سمت چپ "پاره" باقی می ماند.  از آنجایی که لبه سمت چپ تراز نشده است، جایی که خطوط جدید خوانده می شود، خواندن این متن دشوارتر از تراز چپ است.  بنابراین، تراز سمت راست معمولا برای سرفصل های کوتاه که بیش از سه خط نباشد استفاده می شود.  ما سایت های خاصی را در نظر نمی گیریم که متن باید از راست به چپ خوانده شود، در آنجا امکان پذیر است روش مشابهتراز و به کار خواهد آمد.  اما در کجای کشور ما چنین سایت هایی را دیده اید؟  justify Justified که به معنای هم تراز شدن به چپ و راست است.  برای انجام این عمل، مرورگر در این حالت بین کلمات فاصله اضافه می کند. 
مقدار پیش فرض
 
مثال.  تراز متن


 
 
 
 
 
 
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


✖

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

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

 

 
 
 
 
 
 

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

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

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


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


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

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

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

 
متن…
 

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

 
متن…
 

خلاصه درس: 
امروز یاد گرفتیم که چیست پاراگرافدر html  پاراگراف ها اغلب در html استفاده می شوند.  همچنین یاد گرفتیم که ویژگی تگ چیست.  و صفت alignment را یاد گرفت تراز کردنکه می تواند یکی از مقادیر زیر را داشته باشد: سمت چپ (مقدار پیش فرض)،درست،مرکزتوجیه.
با سلام خدمت خوانندگان محترم سایت وبلاگ.  امروز ما به مطالعه ادامه می دهیم و در مرحله بعدی ویژگی های text-decoration، vertical-align، text-align، text-indent و تعدادی دیگر را داریم که به طراحی ظاهر متون در کد Html کمک می کند.
در آخرین مقاله به خواصی که برای پیکربندی در نظر گرفته شده اند نگاه کردیم ظاهرفونت ها در .
خوب، حتی قبلاً همه انواع را با جزئیات بررسی کردیم، یاد گرفتیم که چگونه می توان آنها را گروه بندی کرد و مرورگر هنگام تفسیر آنها چه اولویت هایی را تعیین می کند.  درست است ، همه اینها به چندین مقاله تقسیم شده است ، بنابراین برای اینکه گیج نشوید ، به شما توصیه می کنم مطالب را به ترتیبی که در آن ذکر شده است مطالعه کنید.
تزیین متن، تراز کردن متن، تورفتگی متن در CSS
چگونه با متن در Css کار کنیم؟  منطقی است که فرض کنیم قوانین خاصی برای این منظور طراحی شده است.  بیایید با text-align شروع کنیم، که در واقع جایگزینی برای ویژگی align است (برای تراز کردن محتوا مانند پاراگراف های P یا سرفصل ها استفاده می شد).
این فقط چهار معنی ممکن دارد:
معنی مثل قبل باقی می ماند. تراز کردن متن- این تراز افقی خطوط است.  این قانون منحصراً برای عناصر بلوک (پاراگراف ها، سرفصل ها و غیره) اعمال می شود.  برچسب هایی که ممکن است چندین خط در آنها ظاهر شود.  زیرا  از آنجایی که عناصر درون خطی فقط می توانند یک خط داشته باشند، استفاده از text-align در آنها نکته خاصی ندارد.
واضح است که مقادیر این قانون به ترتیب به معنای تراز است: چپ، راست، مرکز و عرض صفحه (توجیه - همزمان با افزایش فاصله بین کلمات به چپ و راست) .  ناگفته نماند که مقدار Justify باید برای عناصری با حداقل چند خط متن استفاده شود، در غیر این صورت هیچ اثر قابل مشاهده ای وجود نخواهد داشت.
به عنوان مثال، من پاراگراف قبلی را توجیه کردم (می توانید ببینید که هم در سمت چپ و هم در سمت راست مرزهای صاف دارد) با استفاده از:
Text-align: justify;
به طور پیش فرض، تراز افقی متن سمت چپ است، یعنی.  نیازی به نوشتن text-align:left نیست، مگر اینکه قبلاً تراز دیگری را مشخص کرده باشید.  به هر حال، من این پاراگراف را دوباره به مرکز (مرکز) تراز کردم مثال واضح، اما اینجا، من فکر می کنم، همه چیز روشن است.
قانون بعدی Css تورفتگی متنبه شما امکان می دهد یک خط قرمز، به عنوان مثال، برای متن در تگ پاراگراف P مشخص کنید. تورفتگی خط قرمز را می توان با تعیین یک مقدار (با علامت مثبت یا منفی، با استفاده از ) یا استفاده از درصدها مشخص کرد:
درصدها از تورفتگی متنی چه مقدار محاسبه می شوند؟  از عرض ناحیه اختصاص داده شده برای متن.  آن ها  قانون CSS text-indent:50% یک خط قرمز برابر با نصف طول این خط تعیین می کند.  خوب، این پاراگراف به عنوان نمونه ای از چنین قاعده ای عمل می کند.
یا می توانید برای مثال یک مقدار منفی برای خط قرمز در text-indent تعیین کنید و سپس تقریباً همان چیزی را که در این پاراگراف می بینید به دست خواهیم آورد.  برای موفقیت این نتیجهمن این قانون CSS را برای تگ پاراگراف P نوشتم:
Text-indent:-1em;
خوب و استفاده معمولی text-indent (برای تنظیم خط قرمز استاندارد) ممکن است به این صورت باشد: text-indent:40px;  (به هر حال در مورد این بند اعمال می شود).  این قانون، درست مانند تراز متنی که قبلاً بحث شد، فقط برای عناصر بلوک اعمال می شود، یعنی  جایی که ممکن است چندین خط ظاهر شود (پاراگراف ها، عنوان ها و غیره).
خوب حالا بریم سراغ تزیین متن(طراحی با استفاده از یک خط افقی)، که در حال حاضر برای همه اعمال می شود عنصر HTML m (هر دو حروف کوچک و بلوک).
فقط چهار معنی می تواند داشته باشد:
آن ها  می توان با استفاده از تزیین متن استفاده کرد: خط روی خط، خط از طریق خط یا زیر خط، یا استفاده از هیچ چیزی (هیچ کدام).  برخی از عناصر HTML در حال حاضر یک طراحی پیش فرض دارند خط افقیبه عنوان مثال، (به طور پیش فرض زیر آنها خط کشیده شده است).
بنابراین، برجسته کردن چیز دیگری با زیرخط (به جز لینک‌ها) خوب نیست، زیرا کاربران در ناخودآگاه خود نوشته‌اند که وقتی زیر آن خط کشیده شد (و همچنین با رنگ برجسته)، به این معنی است که می‌توانند روی آن کلیک کنند تا بروند.  اما با برجسته کردن متن معمولی با خط زیر، کاربر را گمراه می‌کنید و متعاقباً از منبع خود ناامید می‌شوید (او فکر می‌کرد اینطور است، اما معلوم شد که ...).
نکته ظریف در استفاده از قانون تزیین متن Css این است که شما می توانید سه (یا دو) مقدار را به طور همزمان برای هر عنصر Html وارد کنید (بدون هیچ کدام) و در نتیجه دریافت خواهید کرد. قسمتی از متن زیرخط دار-زیرخط زده شده(به نظر جالب می رسد، اینطور نیست؟):
تزیین متن:خط خط خطی از طریق خط را خط بکشید.
ارزش ها برای تزیین متن(اگر می خواهید همزمان از چندین مورد استفاده کنید) باید بنویسید از طریق یک شخصیت فضایی.
تراز عمودی - تراز عمودی
بعد ما یک تراز عمودی داریم - عمودی-تراز کردن.  تقریباً برای همه عناصر در کد HTML، به معنای تراز کردن عناصر درون خطی با متن نسبت به خط پایه آنها است.  درست است، برای این به معنای کمی متفاوت است - تمام محتوای موجود در این سلول ها به صورت عمودی تراز می شود.
برای قانون CSS vertical-align، می توانید از مقادیر زیر استفاده کنید:
خطوط به طور پیش فرض در خط مبنا تراز شده اند.  ببین من درخواست دادم اندازه فونت را برای این قطعه متن افزایش دهیدو این دو قطعه با خط پایه (پایین) تراز می شوند.  و تراز عمودی با استفاده از vertical-align دقیقاً برای تغییر نحوه تراز کردن خطوط در نظر گرفته شده است.
به عنوان مثال، اگر من برای همان قطعه متن بزرگ شده، vertical-align:baseline بنویسم، هیچ تغییری رخ نخواهد داد، زیرا  مقدار پایه به طور پیش فرض برای این قانون CSS استفاده می شود.
به هر حال، شما همچنین می توانید از اعداد به عنوان مقادیر برای آن استفاده کنید، و کتیبه vertical-align:0 به معنای vertical-align:baseline است، یعنی.  خط مبنا معادل صفر است.  بنابراین، اگر بخواهیم هر تغییری را در تراز عمودی نشان دهیم، آنگاه این تغییر نسبت به خط مبنا (یا صفر) مشخص خواهد شد.
می توانید آن را اینگونه بنویسید:
vertical-align: 10px;
و دریافت خواهیم کرد قطعه را با فونت بزرگتر به سمت بالا تغییر دهید 10 پیکسل نسبت به خط پایه.  اگر مقدار منفی بنویسیم:
تراز عمودی: -10px;
سپس می گیریم قطعه را به پایین تغییر دهیدنسبت به خط پایه  از مثال ها مشخص است که به دلیل جابجایی، ارتفاع خط افزایش یافته است به طوری که متن بدون برخورد با خط مجاور در آن قرار می گیرد.  شیفت را می توان در Em و Ex و به صورت درصد مشخص کرد که از ارتفاع خط این عنصر محاسبه می شود (به یاد داشته باشید در آخرین مقاله نحوه تنظیم آن را با استفاده از ) یاد گرفتیم.
برای تراز عمودی محتویات سلول‌های جدول، باید از مقادیر بالا و پایین استفاده کرد تا محتوا را به ترتیب با بالا و پایین سلول تراز کند (خوب، وسط در یک سلول جدول به عنوان مقدار تراز عمودی پیش‌فرض استفاده می‌شود. ).
و برای عناصر فونت می توانید از متن بالا، متن پایین، وسط استفاده کنید.  بیایید از آن به عنوان مثال استفاده کنیم این تکه متنمعنی:
vertical-align:middle;
در نتیجه چه اتفاقی افتاد؟  خط وسط قطعه بزرگ شده با خط پایه متن معمولی تراز شده است، یعنی.  ما تراز عمودی را با خط مرکزی دریافت کردیم.  برای متن بالا و متن پایین همه چیز یکسان خواهد بود.  این متن بالاست و این متن پایین است.
مقادیر ویژگی Css vertical-align sub و super مربوط به زیر و super-index است که در HTML خالص(قبل از با استفاده از CSSخواص برای طراحی بصری).
تبدیل متن، فاصله حروف، فاصله بین کلمات و فضای سفید
None به طور پیش فرض استفاده نمی شود و به این معنی است که کاراکترهای متن به هیچ وجه تغییر نمی کنند - همانطور که در Html نوشته شده است، به این ترتیب نمایش داده می شوند.  مقدار بزرگ برای تبدیل متن، تمام حروف قطعه را به حروف بزرگ تبدیل می کند ( یک مثال در این جمله نشان داده شده است، که در آن از قانون text-transform: بزرگ استفاده می شود و حروف در ابتدا با حروف کوچک نوشته می شدند).
مقدار کوچک برای قانون تبدیل متن Css به شما این امکان را می دهد که تمام کاراکترهای قطعه را به حروف کوچک تبدیل کنید و مقدار بزرگ باعث می شود تمام حروف اول کلمه بزرگ شوند ( مثال در این جمله- تبدیل متن: بزرگ کردن).  آن ها  با تبدیل متن می توانید هر کاری را که می خواهید انجام دهید در متن ساده، و سپس به راحتی همه چیز را برگردانید.
بنابراین، اگر شما، برای مثال، وظیفه دارید که همه سرفصل ها را فقط نوشته شوند با حروف بزرگ، سپس آنها را طبق معمول با Html بنویسید و از طریق text-transform: بزرگ آنها را در CSS بزرگ کنید.  سپس، اگر تصمیم دارید چیزی را دوباره تغییر دهید، فقط باید یک تغییر کوچک در سبک ها ایجاد کنید، نه در محتوای تمام 100500 هدر سایت خود.
به طور پیش فرض، هر دو فاصله حروف و فاصله بین کلمات بر روی Normal تنظیم شده اند، یا این همان صفر است (یعنی فاصله بین کاراکترها و کلمات به هیچ وجه تغییر نمی کند).  میزان تغییر فاصله در این قوانین را فقط می توان بر حسب پیکسل، اعم از Em یا Ex، مشخص کرد، اما نه به درصد.
با این حال، شما می توانید از هر دو مثبت (کم بودن کاراکترها یا کلمات) و مقادیر منفی(جمع کردن نمادها یا کلمات).  به عنوان مثال، شما می توانید "اینگونه می توان شخصیت های این عبارت را نازک کرد"با استفاده از Css بعدیقوانین:
فاصله حروف: 0.4em;
یا شما می توانید "اینگونه می توان نمادهای این عبارت را به هم نزدیک کرد"با استفاده از:
فاصله حروف:-1px;
همین را می توان در مورد فاصله بین کلمات نیز گفت، با این تفاوت که فاصله بین کلمات تغییر می کند. به عنوان مثال، در این عبارت، با استفاده از این ساختار CSS:
فاصله بین کلمات: 4em;
به طور مشابه، می توانید از مقادیر منفی در فاصله بین کلمات استفاده کنید تا فاصله بین کلمات را کاهش دهید.
خب، آخرین قانون CSS برای امروز، که به شما امکان می دهد متن را در کد Html به روش خاصی قالب بندی کنید، این است فضای سفید.  این مسئول نمایش کاراکترهای فضای خالی در صفحه وب است که زمانی رخ داده است نوشتن HTMLکد
همانطور که از مقاله درباره به یاد دارید، مرورگر هنگام تجزیه کد، تمام فاصله ها، شکسته های خط و برگه ها را در یک فضای واحد ترکیب می کند و خطوط صفحه وب را دقیقاً مطابق با آن می شکند. کاراکترهای فضای خالی، که در کد انجام شد.
بنابراین، فضای سفید می تواند یکی از سه مقدار را داشته باشد:
واضح است که مقدار پیش فرض Normal است و در این حالت همه چیز همانطور که در بالا توضیح دادم نمایش داده می شود.  اما هنگام استفاده از مقدار Pre، یک تشابه کامل با use، i.e.  در صفحه وب، متن با تمام آن کاراکترهای فضای خالی اضافی که در هنگام نوشتن کد وجود داشت، نمایش داده می‌شود و مرورگر دیگر نمی‌تواند با استفاده از آن‌ها انتقال را انجام دهد.
خوب معنیش چیه در حال حاضراین به سادگی مانع از قرار دادن کاراکترهای فضای خالی مرورگر در داخل یک قطعه با قانون CSS white-space:nowrap می شود.  می‌توانید با ایجاد یک فایل Html ساده و محصور کردن هر قطعه متنی در برچسب‌هایی مانند این، سعی کنید چگونه کار می‌کند:
 
بخشی از متن آزمایشی
 
موفق باشی!  به زودی شما را در صفحات سایت وبلاگ می بینیم
با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید
");">
ممکن است علاقه مند باشید
سبک لیست (نوع، تصویر، موقعیت) - قوانین Css برای سفارشی کردن ظاهر لیست ها در کد Html 
تعیین موقعیت با Z-index و CSS قانون مکان نمابرای تغییر مکان نما ماوس 
Padding، Margin و Border - مجموعه CSS داخلیو حاشیه های خارجی، و همچنین قاب برای همه طرف ها (بالا، پایین، چپ، راست) 
CSS برای چیست، چگونه استایل شیت های آبشاری را به آن متصل کنیم سند HTMLو نحو اصلی این زبان 
شناور و پاک کردن در CSS - ابزار طرح بلوک
 
CSS - چیست، شیوه نامه های آبشاری چگونه به آن متصل می شوند کد HTMLبا استفاده از Style و Link