ویژگی vertical-align
به ما کمک می کند تا عناصر خطی چیده شده در کنار هم را نسبت به راستای عمود تراز بندی کنیم.
عناصر خطی شامل متن، تصویر، دکمه و هر عنصری که display آن از نوع inline
یا inline-block
است، می باشند.
همچنین از این عنصر جهت ترازبندی عمودی محتوای داخل خانه های عنصر جدول یا هر عنصری که display
آن از نوع table-cell
است، استفاده می شود.
بصورت پیشفرض عناصر خطی در کنار هم نسبت به baseline یا همان خط مبنای عنصر، تراز می شوند. یعنی اگر تصویری در کنار یک متن داشته باشیم پایین عنصر تصویر با خط مبنای نوشته در یک راستا خواهد بود. حال اگر خواسته باشیم تا تصویر نسبت به متن در وسط راستای عمود قرار بگیرد چه؟ با استفاده از این ویژگی و مقادیر مربوط به آن می توان این موضوع را کنترل کرد.
مقادیر ویژگی vertical-align
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
برای هر یک از مقادیر زیر مثالی آورده شده است که در مثال مورد نظر ویژگی vertical-align
را به تصویر خطی موجود می دهیم. در کنار تصویر، متن عنصر نگهدارنده وجود دارند که محدوده عنصر نگهدارنده را با استفاده از خط چین مشخص می کنیم. همچنین خطی که قرار است با توجه به آن تصویر تراز شود را با رنگ قرمز نمایش می دهیم.
HTML مثال بصورت زیر می باشد:
<div>
<img src="test.png" alt="test image">
this is the test text.
</div>
baseline
این مقدار همان مقدار پیشفرض و اولیه می باشد که خط مبنای عنصر را با خط مبنای عنصر نگهدارنده تراز می کند. اگر عنصر خط مبنا نداشته باشد لبه margin پایین عنصر را با خط مبنای عنصر نگهدارنده یکی می کند.

middle
img {
vertical-align: middle;
}
این مقدار مرکز عمودی عنصر را با خط مبنا بعلاوه نصف ارتفاع کاراکتر X مربوط به فونت مورد استفاده را با هم تراز می کند:

sub
این مقدار باعث می شود تا خط مبنای عنصر تا موقعیت پاییننویس پایین بیاید:

super
این مقدار باعث می شود تا خط مبنای عنصر تا موقعیت بالانویس بالا برود:

text-top
این مقدار بالای عنصر را با خط بالای حروف محتوا یکی می کند. توجه داشته باشیم که اگر برای محتوا از چندین فونت استفاده شده باشد خط فونتی تعیین کننده است که از همه بالاتر قرار می گیرد:

text-bottom
این مقدار پایین عنصر را با خط پایین حروف محتوا یکی می کند. توجه داشته باشیم که اگر برای محتوا از چندین فونت استفاده شده باشد خط فونتی تعیین کننده است که از همه پایین تر قرار می گیرد:

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

همچنین اگر در آن خط line-height به اندازه ای باشد که ارتفاع محتوا را افزایش دهد عنصر با آن ارتفاع تنظیم می شود:

bottom
این مقدار پایین عنصر را با پایین ترین لبه خط موجود یکی می کند. در تصویر زیر چون line-height
تعیین نشده است این مقدار شبیه به text-bottom
عمل می کند:

اما ویژگی line-height
می توان خط را پایین تر ببرد:

مقدار درصدی
فرض کنید مقدار %50
را در نظر گرفته ایم. چون مقدار مثبت است خط تراز به اندازه 50 درصد مقدار line-height نسبت به خط مبنا بالا می رود و اگر مقدار منفی باشد بالعکس:
div {
line-height: 100px;
}
img {
vertical-align: 50%;
}

0 درصد یعنی خط تراز همان خط مبنا می باشد.
مقدار طولی
به همان مقداری که تعیین می شود خط تراز نسبت به خط مبنا بالا می رود اگر مقدار تعیین شده مثبت باشد. در غیر این صورت اگر مقدار منفی باشد خط تراز به سمت پایین خط مبنا حرکت می کند. مقدار صفر خط تراز را در موقعیت خط مبنا قرار می دهد:

inherit
با استفاده کلمه کلیدی inherit
مقدار این ویژگی از عنصر پدر به ارث می رسد.
مثال
در دموی زیر مقدار این ویژگی را تغییر دهید و نتیجه هر کدام را بررسی کنید:
See the Pen vertical-align by Mojtaba Seyedi (@seyedi) on CodePen.
تراز کردن عمودی محتوای جدول
این ویژگی همچنین می تواند محتوای خانه های جدول را تراز کند.
<table>
<tr>
<td>Lorem ipsum dolor sit amet, expedita obcaecati.</td>
<td>
Lorem ipsum dolor sit amet, conitationem doloribus! Sint non rem repellendus.
</td>
</tr>
</table>
td {
vertical-align: top;
}
See the Pen table and vertical-align by Mojtaba Seyedi (@seyedi) on CodePen.
وسط قرار دادن عمودی محتوای عناصر بلاک
گاهی می توان به عنوان یک ترفند عناصر نوع بلاک را به نوع سلول جدول تبدیل کرد و محتوای آنها را در راستای عمود در وسط قرار داد:
div {
display: table-cell;
vertical-align: middle;
}
See the Pen table-cell by Mojtaba Seyedi (@seyedi) on CodePen.
خیلی از مواقع تعیین کردن عنصر بلاک به عنوان نوع سلول جدول می توان آرایش و چیدمان عناصر را از حالتی که نیاز داریم خارج کند. پس همیشه این روش نمی تواند کاربردی باشد.
در مطلب وسط قرار دادن عناصر در سی اس اس با روش های بیشتری در رابطه با این موضوع آشنا می شویم.
سلام
ممنون از توضیحات
یک باکس دارم در بوت استرپ به شکل زیر
حال میخوام کلمه تیتر اخبار عمودی وسط قرار بگیره.با table-cell میاد وسط اما عرض جدول رو کوچک میکنه.نمیخوام از لایت هست استفاده کنم.راهی داره ؟
کدتون رو بزارید روی jsbin.com تا اگر تونستم کمکتون کنم. در ضمن اگر این مطلب نخوندین بخونید:
http://css-tricks.ir/?p=2064
عالی بود
ساده و با تصویر توضیح دادید،ممنون
برای text-bottom نوشته شده این مقدار بالای عنصر را … اشتباه نشده ؟ پایین عنصر درستش نیست ؟
ممنونم، درست شد.
سلام جناب سیدی عزیز،
آیا ویژگی vertical align فقط در مورد متن کار می کنه؟ چون من داخل یک عنصر div یک تصویر قرار دادم و هرکاری کردم که تصویر در راستای عمودی وسط چین بشه نشد که نشد، مگر با استفاده از flex، میشه لطفا راهنمایی کنید؟
سلام، در مورد عناصر دیگه هم کار میکنه فقط باید inline باشند (توی پاراگراف اول این پست گفته شده.)
مثلا شما دو تا عنصر input که خطی باشند رو هم کنار هم داشته باشی میتونی از این ویژگی استفاده کنی.
عالی بود خیلی ممنون .!