CSSطراحی سایتگوناگون

۲۰-تراز بندی عناصر در CSS

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

 

تراز بندی عناصر Block

 

یک عنصر block، عنصری است که تمام طول یک خط را اشغال کرده و قبل و بعد از آن یک سطر وجود دارد.

  • در این فصل نشان میدهیم که چگونه یک عنصر Block را در جهت محور X تراز بندی کنید.

 


 

تراز بندی با کمک خصوصیت margin

 

با تراز بندی عناصر block به کمک خصوصیت margin و مقدار “auto” میتوان به صورت خودکار متن را در میانه ی صفحه تراز بندی کرد.

  • تصویر قطعه کد بالا به شکل زیر است:

  • نکته: اگر خصوصیت width با مقدار ۱۰۰% تنظیم شود، تراز بندی اثری نخواهد داشت.

 

تراز بندی به کمک خصوصیت position

 

روش دیگر برای تراز بندی عناصر استفاده از خصوصیت position میباشد.

  • تصویر قطعه کد بالا به شکل زیر است:

توجه: عنصری که به صورت Absolute موقعیت دهی می شود، در واقع از حالت عادی خارج شده است و می تواند روی دیگر عناصر قرار بگیرد.

 


 

تراز بندی با کمک خصوصیت float

 

روش دیگر برای تراز بندی استفاده از خصوصیت float میباشد.

 

  • تصویر قطعه کد بالا به شکل زیر است:


بخش بعدی

بخش قبلی

 

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

علی کاظمی

علی کاظمی هستم دانشجو رشته نرم افزار دانشگاه روزانه دامغان . از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن