نکاتی کاربردی در مورد CSS (جلسه 18) : نکاتی در مورد ویژگی vertical-align

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

ویژگی vertical-align رفتار مشابهی برای سلولهای جداول و المنتهای دیگر ندارد

اگر شما از قدیم زیاد کدنویسی کرده باشید و یا اینکه زیاد با استفاده از HTML برای ایمیلها کدنویسی کرده باشید باید اطلاع داشته باشید که یک ویژگی بنام valign وجود داشت که HTML4 به میدان اومده بود. این ویژگی در HTML5 منسوخ شده و دیگه نباید از اون استفاده کرد و ویژگی دیگه ای بنام vertical-align بجای اون معرفی شده است.

اما خروجی و عملکرد vertical-align دقیقا مثل valign نیست و باید به این موضوع دقت داشته باشید. مورد استثنایی که در این زمینه وجود داره المنت table یا جدول هست. سوالی که در اینجا پیش میاد اینه که ویژگی vertical-align چه تفاوتی برای المنتهای عادی و سلولهای جدول داره؟

زمانی که شما vertical-align رو برای المنتهای عادی بجزء جداول استفاده میکنید، این ویژگی از قواعد زیر پیروی میکنه:

  • فقط برای المنتهای inline و inline-block کار میکنه و بقیه موارد رو پوشش نمیده
  • هیچ تاثیری بر روی محتوای اون المنت نداره و فقط محل قرارگیری عمودی نسبت به بقیه المنتهای inline و inline-block رو تغییر میده
  • تنظیمات دیگه فونت و متن مانند line-height و ... و همچنین المنتهای inline و inline-block دیگه میتونن بر روی اون تاثیر داشته باشن

دموی زیر رو مشاهده کنید که در اون ویژگی vertical-align برای یک المنت inline قرار داده شده است: در بالا ویژگی vertical-align برای input اعمال شده است. با کلیک بر روی هر کدوم از دکمه هایی که در زیر اون قرار داره میتونین مقدار اون رو تغییر بدین. همونطور که مشاهده میکنید با کلیک بر روی دکمه های مورد نظر، محل قرارگیری input تغییر داده میشه. در کل این نمونه ای که مشاهده کردید خیلی ساده و ابتدایی هست و وصرفا برای آشنایی قرار داده شده. برای مطالعه عمیق و دقیقتر میتونین این پست رو مطالعه کنید.

اما زمانی که از ویژگی برای جداول استفاده میکند همه چیز فرق میکنه و کلا رفتار متفاتی داره. شما میتونین ویژگی vertical-align رو برای سلولهای جدول مورد نظرتون استفاده کنید و محل قرارگیری محتوای اون سلولها هم دچار تغییر میشه. برای مثال به دموی زیر که در مورد استفاده از vertical-align برای جداول هست دقت کنید: همونطور که دیدید برای جداول فقط میتونین از 4 مقدار این ویژگی استفاده کنید. همچنین میبینید که زمانی که روی دکمه ها کلیک میکنیم مقدار vertical-align مربوط به سلول سمت چپی تغییر میکنه و بر روی سلولهای اطراف خودش هم تاثیر میزاره.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.