Baseline #
Use d-va-baseline to vertically align an element to the baseline.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-baseline"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Top #
Use d-va-top to vertically align an element to the top.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-top"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Middle #
Use d-va-middle to vertically align an element to middle.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-middle"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Bottom #
Use d-va-bottom to vertically align an element to the bottom.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-bottom"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Text Top #
Use d-va-text-top to vertically align an element to text top.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-text-top"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Text Bottom #
Use d-va-text-bottom to vertically align an element to text bottom.
<div class="d-w100p d-ps-relative d-lh0 d-bgc-moderate"> <div class="d-w-0 d-h-25 d-d-inline-block d-va-text-bottom"> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> <span class="d-ps-absolute d-ibs-0 d-h-25 d-w100p d-by d-bts-dashed d-bbs-dashed d-bc-focus"></span> </div> <p class="d-fs-200 d-d-inline-block d-ps-relative d-zi-base1">The quick brown fox.</p> </div>
Classes #
Class
|
Output
|
|---|---|
| .d-va-baseline | vertical-align: baseline !important; |
| .d-va-top | vertical-align: top !important; |
| .d-va-bottom | vertical-align: bottom !important; |
| .d-va-text-top | vertical-align: text-top !important; |
| .d-va-text-bottom | vertical-align: text-bottom !important; |
| .d-va-middle | vertical-align: middle !important; |
| .d-va-sub | vertical-align: sub !important; |
| .d-va-super | vertical-align: super !important; |
| .d-va-unset | vertical-align: unset !important; |