diff options
| -rw-r--r-- | scss/_utilities.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/position.md | 16 |
2 files changed, 19 insertions, 1 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dacd8b289..89bf16847 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -65,7 +65,9 @@ $utilities: map-merge( property: transform, class: translate-middle, values: ( - null: (translateX(-50%) translateY(-50%)) + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), ) ), "border": ( diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md index 3e84ce557..63ce589b3 100644 --- a/site/content/docs/5.0/utilities/position.md +++ b/site/content/docs/5.0/utilities/position.md @@ -68,6 +68,22 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)` </div> {{< /example >}} +By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction. + +{{< example class="bd-example-position-utils" >}} +<div class="position-relative"> + <div class="position-absolute top-0 start-0"></div> + <div class="position-absolute top-0 start-50 translate-middle-x"></div> + <div class="position-absolute top-0 end-0"></div> + <div class="position-absolute top-50 start-0 translate-middle-y"></div> + <div class="position-absolute top-50 start-50 translate-middle"></div> + <div class="position-absolute top-50 end-0 translate-middle-y"></div> + <div class="position-absolute bottom-0 start-0"></div> + <div class="position-absolute bottom-0 start-50 translate-middle-x"></div> + <div class="position-absolute bottom-0 end-0"></div> +</div> +{{< /example >}} + ## Examples Here are some real life examples of these classes: |