no-img

اِمیلا تنظیم عمودی در CSS با Vertical-align
اِمیلا
ترفند وب تنظیم عمودی در CSS با Vertical-align
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

منتشر شده در پنجشنبه 27 تیر 1398، 24 روز پیش
تنظیم عمودی در CSS با Vertical-align
امتیاز 5.00 ( 5 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

emila.ir QR-codeتنظیم عمودی در CSS با Vertical-align

منتشر شده در پنجشنبه 27 تیر 1398، 24 روز پیش
26
milipinkman

به وسیله ی خصوصیت Vertical-align در CSS می توانید تراز بندی یک عنصر را نسبت به یک عنصر دیگر به صورت عمودی تعیین کنید. عموما عناصر که می خواهیم از لحاظ عمودی آن هارا تراز بندی کنیم باید از نظر خطی در یک راستا باشند. مانند متن ها، عکس ها، دکمه ها و … به مثال زیر دقت کنید:

img { vertical-align: middle;
}

این مقدار مرکز عمودی عنصر را با خط مبنا بعلاوه نصف ارتفاع کاراکتر X مربوط به فونت مورد استفاده را با هم تراز می کند نتیجه می شود تصویر زیر:

در کل ما عناصری را تراز بندی می کنیم که دارای خصوصیت Display:inline یا خصوصیت Display:inline-Block باشد.

عموما در خصوصیت Vertical-align در CSS یازده حالت وجود دارد. در این آموزش از emila.ir می خواهیم به معرفی و آموزش این حالات بپردازیم. این حالات عبارتند از:

  • baseline
  • sub
  • super
  • top
  • text-top
  • middle
  • bottom
  • text-bottom
  • inherit

حالت baseline

این خصوصیت به صورت پیشفرض بر روی تمامی اجزا وجود دارد.

حالت sub

زمانی که از این حالت استفاده میکنید عنصر مورد نظر ما در قسمت پایینی عنصر قبل از خود قرار میگیرد.

حالت super

زمانی که از این حالت استفاده میکنید عنصر مورد نظر ما در قسمت بالایی عنصر قبل از خود قرار میگیرد.

حالت top

زمانی که از این حالت استفاده میکنید عنصر مورد نظر ما در قسمت بالایی عنصر قبل از خود قرار میگیرد. اما در این حالت عنصر ما بالاتر از قسمت بالایی جسم نمی رود.

حالت text-top

در این حالت قسمت بالایی عنصر مورد نظر ما با قسمت بالایی متن مورد نظر ما یکی می شود. در صورتی که در نوشتن متن خود از چندین فونت استفاده کرده باشیم فونتی که از بقیه بلند تر باشد قسمت بالایی متن ما خواهد بود.

حالت middle

Middle در لغت به معنای میانه می باشد. زمانی که از این ویژگی استفاه می کنیم عنصر مورد نظر ما عموما در میانه ی قسمت بالایی و پایینی عنصر دیگر قرار میگیرد.

حالت bottom

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

حالت text-bottom

در این حالت قسمت پایینی عنصر مورد نظر ما با قسمت پایینی متن مورد نظر ما یکی می شود. در صورتی که در نوشتن متن خود از چندین فونت استفاده کرده باشیم فونتی که از بلندتر باشد قسمت پایینی متن ما خواهد بود.

حالت inherit

عموما در این حالت عنصر مورد نظر ما از عنصر پدر خود پیروی می کند.

مبحث تکمیلی خصوصیت Vertical-align در CSS

تا اینجای کار با مقادیری که می توانیم به خصوصیت Vertical-align در CSS بدهیم آشنا شدید. اما جالب است بدانید که به این خصوصیت ها می توانیم از طریق درصد نیز اندازه هایی را اعمال کنیم. برای مثال می توانیم بنویسیم  vertical-align:70%; سپس عنصر مورد نظر ما به مقدار ۷۰% از پایین ترین خط عنصر مادر خود به سمت بالا فاصله می گیرد.

در صورتی که این مقدار این درصد منفی باشد دقیقا بلعکس قضیه ی بالا اتفاق افتاده و در این حالت عنصر مورد نظر ما از بالاترین قسمت عنصر مادر ما به میزان ۷۰% به سمت پایین فاصله میگیرد.

علاوه بر درصد شما می توانید از مقادیری مانند پیکسل نیز در این بخش استفاده کنید و نتیجه ی آن مانند درصد می باشد. یعنی اگر در مقابل خصوصیت Vertical-align مقدار ۱۰۰px را قرار دهیم عنصر مورد نظر ما از خط پایینی به مقدار ۱۰۰px به سمت بالا حرکت میکند و در صورتی که منفی باشد بلعکس قضیهی بالا اتفاق می افتد.

خلاصه مطلب

به وسیله ی خصوصیت Vertical-align در CSS می توانید تراز بندی یک عنصر را نسبت به یک عنصر دیگر به صورت عمودی تعیین کنید
زمانی که از حالت Sub استفاده میکنید عنصر مورد نظر ما در قسمت پایینی عنصر قبل از خود قرار میگیرد.
زمانی که از حالت Super استفاده میکنید عنصر مورد نظر ما در قسمت بالایی عنصر قبل از خود قرار میگیرد.
زمانی که از حالت Top استفاده میکنید عنصر مورد نظر ما در قسمت بالایی عنصر قبل از خود قرار میگیرد. اما در این حالت عنصر ما بالاتر از قسمت بالایی جسم نمی رود.
در حالت text-top قسمت بالایی عنصر مورد نظر ما با قسمت بالایی متن مورد نظر ما یکی می شود.
زمانی که از ویژگی Middle استفاه می کنیم عنصر مورد نظر ما عموما در میانه ی قسمت بالایی و پایینی عنصر دیگر قرار میگیرد.
زمانی که از حالت Bottom استفاده میکنید عنصر مورد نظر ما در قسمت پایینی عنصر قبل از خود قرار میگیرد.
در حالت Text-bottom قسمت پایینی عنصر مورد نظر ما با قسمت پایینی متن مورد نظر ما یکی می شود.
جالب است بدانید که به خصوصیت Vertical-align در CSS می توانیم از طریق درصد نیز اندازه هایی را اعمال کنیم.
علاوه بر درصد شما می توانید از مقادیری مانند پیکسل نیز در خصوصیت Vertical-align در CSS استفاده کنید.

موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=16564
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

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

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

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

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک به ما  -  ارسال ایمیل به ما
IP شما: 34.201.121.213