آیا می دانید تا کنون 8859 نفر در 19 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 316 ۲۱ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :