አቀባዊ አሰላለፍ

የውስጠ-መስመር፣የመስመር-ብሎክ፣የመስመር-ጠረጴዛ እና የጠረጴዛ ሕዋስ አባሎችን አቀባዊ አሰላለፍ በቀላሉ ይቀይሩ።

የንጥረ ነገሮች አሰላለፍ ከመገልገያዎች ጋር ይቀይሩ vertical-alignment። እባኮትን አቀባዊ አሰላለፍ የሚነካው የመስመር ላይ፣ የውስጠ-መስመር፣ የመስመር-ጠረጴዛ እና የጠረጴዛ ሕዋስ አባሎችን ብቻ ነው።

ከ .align-baseline፣፣፣፣፣፣ እና እንደአስፈላጊነቱ ይምረጡ ። .align-top_.align-middle.align-bottom.align-text-bottom.align-text-top

የመስመር ውጪ ያልሆኑ ይዘቶችን (እንደ <div>s እና ሌሎችን ያሉ) በአቀባዊ ወደ መሃል ለማድረስ የእኛን ተጣጣፊ ሳጥን መገልገያዎችን ይጠቀሙ ።

ከውስጥ መስመር አካላት ጋር፡-

የመነሻ መስመር የላይኛው መካከለኛ ታች ጽሑፍ-ከላይ ጽሑፍ-ታች

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>

ሳስ

መገልገያዎች ኤፒአይ

አቀባዊ አሰላለፍ መገልገያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scss። የመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

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