Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Ҳамоҳангсозии амудӣ

Ҳамоҳангсозии амудии унсурҳои чашмаки сатр, блоки дохилӣ, ҷадвали дохилӣ ва ҷадвалро ба осонӣ тағир диҳед.

Ҳамоҳангсозии элементҳоро бо vertical-alignmentутилитҳо тағир диҳед. Лутфан қайд кунед, ки амудӣ-ҳамворкунӣ танҳо ба унсурҳои чашмаки сатр, блоки дохилӣ, ҷадвали дохилӣ ва ҷадвал таъсир мерасонад.

Аз .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottomва .align-text-topдар ҳолати зарурӣ интихоб кунед.

Барои амудӣ марказонидани мундариҷаи ғайрихаттӣ (ба монанди <div>s ва бештар), аз утилитаҳои флекси қуттии моро истифода баред .

Бо унсурҳои inline:

ибтидоӣ боло миёна поёни матн-боло матн-поён
<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>

Бо ҳуҷайраҳои ҷадвал:

асоси боло миёна поён матн-боло матн-поён
<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 Utilities

Утилитҳои ҳамоҳангсозии амудӣ дар API утилитаҳои мо дар scss/_utilities.scss. Омӯзед, ки чӣ тавр истифода бурдани API-и коммуналӣ.

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