ဒေါင်လိုက် ချိန်ညှိခြင်း။

inline၊ inline-block၊ inline-table နှင့် table cell ဒြပ်စင်များ၏ ဒေါင်လိုက်ချိန်ညှိမှုကို အလွယ်တကူပြောင်းပါ။

vertical-alignmentutilities များ ဖြင့် ဒြပ်စင်များ၏ ချိန်ညှိမှုကို ပြောင်းလဲပါ ။ ဒေါင်လိုက်-ညှိခြင်းသည် လိုင်း၊ လိုင်း-ပိတ်ဆို့၊ ဇယားကွက်နှင့် ဇယားဆဲလ်ဒြပ်စင်များကိုသာ အကျိုးသက်ရောက်ကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ။

.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, နှင့် .align-text-topလိုအပ်သလို ရွေးချယ် ပါ။

ဒေါင်လိုက်မဟုတ်သော အကြောင်းအရာများ ( <div>s နှင့် အခြားအရာများ ကဲ့သို့) ကို ဗဟိုပြုရန် ကျွန်ုပ်တို့၏ flex box utilities ကို အသုံးပြု ပါ။

အတွင်းအစိတ်အပိုင်းများဖြင့်-

အခြေခံ စာကြောင်း အပေါ် အလယ် အောက်ခြေ စာသား-အပေါ် စာသား-အောက်ခြေ

html

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

ဇယားဆဲလ်များဖြင့်

အခြေခံစာရင်း

ထိပ်တန်း

အလယ်တန်း

အောက်ခြေ

စာသားထိပ်

စာသား-အောက်ခြေ

html

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

ဆူး

အသုံးအဆောင်များ API

Vertical align utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),