ऊर्ध्वाधर संरेखण

inline, inline-block, inline-table, तथा table cell elements इत्येतयोः ऊर्ध्वाधरसंरेखणं सहजतया परिवर्तयन्तु ।

vertical-alignmentउपयोगितानां सह तत्त्वानां संरेखणं परिवर्तयन्तु । कृपया ज्ञातव्यं यत् vertical-align केवलं inline, inline-block, inline-table, table cell elements इत्येतयोः प्रभावं करोति ।

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

सस्स

उपयोगिता एपिआइ

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