جلسه دوازدهم: چینش المنت ها (float,align) در css

چینش المنت ها (float,align) در css

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

چینش المنت ها با استفاده از ویژگی float

در ابتدای کار با یه ویژگی آشنا میشیم به اسم float . ما با استفاده از این ویژگی میتونیم محل قرار گیری المنت ها در سمت چپ یا راست رو تنظیم کنیم. البته این ویژگی مقادیر دیگه ای هم میگیره که در ادامه توضیح میدم. تصویر زیر رو ببینید:

همونطور که در تصویر بالا میبینید من دو تا div دارم که به هر کدوم یک کلاس مجزا دادم. من از ویژگی float در استایل دهی این دو div استفاده کردم و برای یکی مقدار right و برای یکی هم مقدار left رو قرار دادم. این ویژگی مشخص میکنه که المنت من چه نوع چینشی داشته باشه.

حالا تصویر زیر رو ببینید:

در تصویر بالا کلاس left از ویژگی float:left که داخل div تعریف شده اسفاده کرده و در نتیجه سمت چپ قرار گرفته. اما کلاس right که براش خودم float راست رو تعریف کردم به سمت راست صفحه رفته. نکته مهم این هست که اگه در قسمت body دقت کنید من ۳ تگ div که استفاده کردم ترتیب کلاس ها اولی right دومی left و سومی دوباره right هست. دقت کنید که در خروجی این ترتیب رعایت نشده و اولویت با float کلاس ها هست و نه ترتیب حضورشون در فایل html.

راست چین کردن تصویر و چپ چین کردن تصویر در css

ما با استفاده از ویژگی float میتونیم جایگاه تصویر خودمون رو داخل متن مشخص کنیم. تصویر زیر رو ببینید:

همینطور که میبینید من ۳ پاراگراف دارم که داخل هر کدوم از اونها یک تصویر هم هست. همونطور که در دوره آموزش html یادگرفتیم تگ img خاصیت inline داره. در پاراگراف تصویر من بدون float هست و هیچ مقداری براش مشخص نکردم. میبینید که در ابتدای من قرار داره و بقیه متن بعد از اون نمایش داده شده. در پاراگراف دوم مقدار float رو روی right قرار دادم. میینید که با این کار تونستم جایگاه تصویرم رو مدیریت کنم و اون رو در سمت راست قرار بدم و متن من در کنار تصویر تراز و مرتب شده. همینطور در پاراگراف سوم با دادن مقدار left به ویژگی float تصویر من در سمت چپ قرار گرفته است.

ما میتونیم از مقادیر none و inherit نیز برای ویژگی float استفاده کنیم. مقدار none مقدار بدون float هست و مقدار inherit باعث میشه که عنصر ما این ویژگی خودش رو از عنصر والد الگوبرداری کنه.

وسط چین کردن المنت در css

خب ما با استفاده از float تونستیم المنت خودمون رو راست چین و چپ چین کنیم. حالا میخوایم با استفاده از ویژگی margin المنت خودمون رو وسط چین کنیم. تصویر زیر رو ببینید:

همینطور که میبینید من برای کلاس center ویژگی margin رو قرار دادم و مقدار auto رو به این ویژگی دادم. این کار باعث میشه که المنتی که این کلاس رو میگیره بصورت وسط چین نمایش داده بشه. البته علت وسط چین بودن نوشته ویژگی text-align هست که قبلا باهاش آشنا شدیم و من اینجا برای تگ h1 خودم ازش استفاده کردم.

راست چین و چپ چین با استفاده از ویژگی position

ما با استفاده از ویژگی position میتونیم المنت های خودمون رو راست چین و چپ چین کنیم و در سمت راست یا چپ صفحه نمایش بدیم. برای این کار کافیه که مقدار absolute رو برای ویژگی position قرار بدیم و با مقداردهی صفر برای ویژگی left میتونیم اون رو در سمت چپ و با مقداردهی ویژگی right میتونیم اون المنت رو در سمت راست قرار بدیم. تصویر زیر رو ببینید:

همونطور که در تصویر بالا میبینید من دو کلاس left و right دارم. ویژگی position هر دو کلاس رو روی absolute تنظیم کردم. برای کلاس right مقدار ویژگی right رو روی صفر قراردادم. این کار باعث میشه که موقعیت المنتی که از این کلاس استفاده میکنه به سمت راست بچسبه و همینطور برای کلاس left مقدار ویژگی left رو روی صفر قراردادم که به همین دلیل موقعیت المنتی که از این کلاس استفاده میکنه در سمت چپ صفحه هست. همونطور که میبینید دو تگ div استفاده شده که با این دو کلاس مقداردهی شدند در سمت چپ و راست صفحه قرار گرفتند.

وسط چین عمودی با استفاده از padding

اگر خاطرتون باشه ما برای قراردادن متن در وسط یک خانه از جدول از ویژگی vertical-align استفاده میکردیم. حالا اگر بخواهیم در داخل یک تگ دیگه مثل div محتوای خودمون رو از لحاظ ارتفاع وسط قرار بدیم چکار باید بکنیم؟ اینجا ما میتونیم با استفاده از ویژگی padding این کار رو انجام بدیم. تصویر زیر رو ببینید:

من برای بالا و پایین padding رو روی 70px قرار دادم. این کار باعث میشه که فاصله بالا و پایین برابر باشه و در نتیجه المنت های داخلی از لحاظ عمودی در وسط قرار بگیرند.

وسط چین عمودی با استفاده از line-height

یه روش دیگه برای وسط چین قراردادن در ارتفاع این است که مقدار line-height رو با height المنت برابر قراربدیم. به این ترتیب المنت هایی که inline هستند در وسط قرار میگیرند.

قطعه کد زیر رو ببینید:

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

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

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

وسط چین کردن عمودی با استفاده از Flexbox

در این روش ما مقدار display رو روی flex قرار میدیم. با این کار میتونیم از ویژگی align-items استفاده کنیم و مقدار center رو بهش اختصاص بدیم. این کار باعث میشه که المنت های داخلی بصورت وسط چین قرار بگیرن. همینطور میتونیم از لحاظ افقی هم با استفاده از ویژگی justify-content محتوای خودمون رو وسط چین کنیم. قطعه کد زیر رو ببینید:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

همه ویدیوهای دوره آموزش CSS