جلسه چهل و پنجم: خصوصیت Vertical-align در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 12 فوریه 2019 133 بازدید

خصوصیت Vertical-align در CSS

در جلسات پیش در مورد خصوصیت Text-transform صحبت نموده ایم (برای مشاهده ی آموزش خصوصیت Text-transform در CSS کلیک کنید) در این جلسه از جلسات طراحی صفحات وب می خواهیم به آموزش خصوصیت Vertical-align در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

توضیح خصوصیت Vertical-align در CSS

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

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

 

حالات مختلف در خصوصیت Vertical-align در CSS

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

  1. baseline
  2. sub
  3. super
  4. top
  5. text-top
  6. middle
  7. bottom
  8. text-bottom
  9. inherit

 

حالت baseline

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

حالت sub

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

حالت super

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

حالت top

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

حالت text-top

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

حالت middle

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

حالت bottom

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

حالت text-bottom

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

حالت inherit

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

برای فهم حالات بالا به مثال زیر توجه کنید:

کد HTML:


<p>

این عکس دارای خاصیت Baseline می باشد. <img src="image/img3.jpg" class="img1">

</p>

<p>

این عکس دارای خاصیت sub می باشد. <img src="image/img3.jpg" class="img2">

</p>

<p>

این عکس دارای خاصیت super می باشد. <img src="image/img3.jpg" class="img3">

</p>

<p>

این عکس دارای خاصیت top می باشد.<img src="image/img3.jpg" class="img4">

</p>

<p>

این عکس دارای خاصیت text-top می باشد.<img src="image/img3.jpg" class="img5">

</p>

<p>

این عکس دارای خاصیت middle می باشد. <img src="image/img3.jpg" class="img6">

</p>

<p>

این عکس دارای خاصیت Bottom می باشد. <img src="image/img3.jpg" class="img7">

</p>

<p>

این عکس دارای خاصیت text-bottom می باشد. <img src="image/img3.jpg" class="img8">

</p>

<p>

این عکس دارای خاصیت inherit می باشد.<img src="image/img3.jpg" class="img9">

</p>

کد CSS:


body {

background-color: #fff;

}

img {

width: 15px;

height: 12px

}

p {

border-bottom: 1px solid #999

}

.img1 {

vertical-align:baseline;

}

.img2 {

vertical-align: sub;

}

.img3 {

vertical-align: super;

}

.img4 {

vertical-align:top;

}

.img5 {

vertical-align:text-top;

}

.img6 {

vertical-align:middle;

}

.img7 {

vertical-align:bottom;

}

.img8 {

vertical-align:text-bottom;

}

.img9 {

vertical-align:inherit;

}

خروجی کد بالا:

خصوصیت Vertical-align در CSS

همانطور که در عکس بالا مشاهده می کنید عموما این مثال ها تفاوت های کمی دارند که به خاطر اندازه ی آن ها می باشد. در صورتی که می خواهید بهتر متوجه شوید باید خودتان مثال های جدید را خلق یا آن ها را در سایت های دیگر ببینید.

 

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

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

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

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

خلاصه مطلب

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

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه چهل و پنجم: خصوصیت Vertical-align در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.