Alineación vertical nisqa

Chiru ukhupi, chiru-bloque, chiru-tabla, tabla celda elementokuna sayaq chiqanchayta mana sasachakuspa tikray.

vertical-alignmentUtilidades nisqawan elementokuna tupachiyta tikray . Ama hina kaspa, vertical-align nisqa inline, inline-block, inline-table, tabla celda elementokunallatam afectan.

.align-baseline, .align-top, .align-middle, , , .align-bottomnisqamanta .align-text-bottomakllay, necesitasqaykiman .align-text-tophina.

Mana chiruyuq willayta sayaq chawpichaypaq ( <div>s hina chaymanta aswan), flex caja yanapakuyniyku llamk'achiy .

Inline elementokunawan:

baseline pata chawpi uray qillqa-pata qillqa-ura

html nisqapi

<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>

Tabla celdakunawan:

base nisqa

hanaq

chawpi

uray

qillqa-pata

qillqa-urapi

html nisqapi

<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>

Sass

API de Utilidades nisqa

Sayaq chiqanchay yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss. Yachay imayna ruwanakuna API llamk'achiyta.

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