ویژگی vertical-align در CSS

vertical-align Property

ویژگی vertical-align در CSS ترازبندی عمودی عناصر inline , inline-block و table-cell را مشخص می کند.

نحوه نوشتار

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

vertical-align: 1rem;
vertical-align: 3px;

vertical-align: 10%;

این ویژگی در دو حالت می تواند مورد استفاده قرار گیرد:

• برای ترازبندی عمودی در عنصر inline. برای مثال تراز بندی عمودی تصویر در متن:

• برای ترازبندی عمودی محتوا در سلول جدول:

مقادیر

baseline​

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

واحد اندازه (طول)​

بالا یا پایین بردن عنصر نسبت به خط متنی با استفاده از مقادیر ثابت.

درصد​

بالا یا پایین بردن عنصر به نسبت درصدی از line-height یا فاصله بین خطوط فرضی متنی.

middle​

عنصر در وسط عنصر والد قرار می گیرد.

sub​

ترازبندی عنصر زیر خط فرضی متنی.

super​

ترازبندی عنصر بالای خط فرضی متنی.

top​

ترازبندی عنصر نسبت به بلندترین عنصر در خط متنی.

text-top​

ترازبندی عنصر نسبت به بالای فونت عنصر والد.

text-bottom​

ترازبندی عنصر نسبت به پایین فونت عنصر والد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<section>
      <div class="wrapper">
        <div>
          متن نمونه. baseline
          <img class="baseline" src="http://my-project.ir/img/list-img.png"/>
        </div>
        <div>
          متن نمونه. lenght<img
            class="length" src="http://my-project.ir/img/list-img.png" />
        </div>
        <div>
          متن نمونه. درصد
          <img class="per" src="http://my-project.ir/img/list-img.png" />
        </div>
        <div>
          متن نمونه. sub
          <img class="sub" src="http://my-project.ir/img/list-img.png" />
        </div>
      </div>
      <div class="wrapper">
        <div>
          متن نمونه. super
          <img class="super" src="http://my-project.ir/img/list-img.png" />
        </div>
        <div>
          متن نمونه. top
          <img class="top" src="http://my-project.ir/img/list-img.png" />
        </div>
        <div>
          متن نمونه. text-top
          <img class="text-top" src="http://my-project.ir/img/list-img.png" />
        </div>
        <div>
          متن نمونه. text-bottom
          <img class="text-bottom" src="http://my-project.ir/img/list-img.png" />
        </div>
      </div>
</section>

css

section {
    direction: rtl;
    font: bold 16px calibri;
    display: flex;
    justify-content: center;
}
.wrapper { 
    margin-left: 5%; 
}
.wrapper div {
    margin-top: 15px; 
}
.baseline {
    vertical-align: baseline; 
}
.length {
    vertical-align: -10px; 
}
.per {
    vertical-align: 10%; 
}
.sub {
    vertical-align: sub; 
}
.super {
    vertical-align: super; 
}
.top {
    vertical-align: top; 
}
.text-top {
    vertical-align: text-top; 
}
.text-bottom {
    vertical-align: text-bottom; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.