cssblog.ir logo
P

vertical-align

هم‌ترازی عمودی

مشخصه کاربردی vertical-align در تعیین محل قرارگیری عناصر از لحاظ عمودی به نسبت ارتفاع خط و خط مبنا (baseline) و همچنین تراز عمودی خانه های جدول‌ها کاربر دارد

مشخصه vertical-align نحوه قرار گیری عناصرinline و inline-block را باتوجه به خطی که در آن قرار دارند، تعیین می کند.

مثال: ۳ عنصر با ارتفاع های مختلف با استفاده از مشخصه vertical-align و مقدارmiddle طوری با یکدیگر تنظیم شده‌اند که به نسبت یکدیگر در میانه خط قرار بگیرند.

عناصری که بصورت پیشفرض inline هستند مانندspan وimg بصورت پیشفرض به این مشخصه واکنش نشان خواهند داد. اما اگر بخواهید موقعیت عمودی یکh1 یاdiv را با استفاده از این مشخصه تنظیم کنید باید display: inline-block را به آنها بدهیم.

لیست مقادیر

baseline

مقدار پیشفرض برای تمام عناصر - روی خط.

top

لبه بالای عناصر با خط تنظیم می شود.  

bottom

لبه پایین عناصر با خط تنظیم می شود.  

 

middle

عناصر در میانه خط قرار می گیرند. از لحاظ فنی می توان گفت که قسمت وسط (میانه) عنصر با میانه حروف کوچک والد آن تنظیم می‌شود. مانند مثال اول. 

text-top

لبه بالای عناصر با قسمت بالای فونت تنظیم می شود

text-bottom

لبه پایین عناصر با قسمت پایین فونت تنظیم می شود

sub , supper

در HTML تگ هایی با نام sub و sup وجود دارد که برای تعیین بالانویس (مانند عدد توان در ریاضی) و پایین‌نویس مانند آنچه در شیمی مانند C6H12O6 نوشته می شود، کاربرد دارد. حال کاری که دو مقدار sub و supper انجام می‌دهند این است که عنصر با موقعیتی که بالانویس (super) و پایین‌نویس (sub) قرار می‌گیرند، تنظیم می‌کنند.

در مثال زیر نمونه برخی از مقادیر فوق را مشاهده می‌کنید:

مقادیر طولی

اگر یک مقدار طولی با استفاده از واحدهایی مانند پیکسل px، rem و em و درصد (٪) وارد شود، عنصر به آن اندازه بالاتر از خط پایه (baseline) والد خود،‌ تنظیم می شود.

استفاده برای جدول ها

احتمالا در نرم افزاری مانند وُرد (word) مشاهده کرده‌اید که می توان خانه‌های یک جدول را که متن‌های مختلفی دارند را طوری تنظیم کرد که از لحاظ عمودی در وسط خانه‌ها قرار بگیرند. باید بدانید که مشخصه vertical-align روی خانه های tableها در HTML نیز کاربرد دارد و می توان این چنین استایل هایی را با استفاده از آن، ایجاد کرد. مانند: 

 در مثال فوق به محل قرارگیری نوشته ستون اول و سوم به نسبت ستون دوم دقت کنید

وسط عمودی!

در CSS همواره تراز کردن عناصر از لحاظ عمودی و آن هم در وسط (میانه) سخت تر از وسط افقی بوده و هست. یکی از کاربردهای بسیار مهم این مشخصه، استفاده برای همین هدف می باشد. چراکه عنصری که vertical-align: middle داشته باشد به تغییرات line-height والد خود واکنش نشان داده و همیشه از لحاظ عمودی در وسط فضای والد خود قرار خواهد گرفت که این دانستن این نکته می تواند به ما بسیار کمک کند. پس مجددا جمله قبلی را بخوانید تا یک عمر راحت باشید. مانند:

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

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

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

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند