Centering positioned elements

Use position_centered() to position an element by its center instead of its edge.

Usage

position_centered(x)

Arguments

x

A tag element or .style pronoun.

Value

An object of the same type as x.

See also

Other position utilities: position_sticky(), position()

Examples

library(htmltools)

div(
  .style %>%
    position("absolute") %>%
    position_right(0) %>%
    position_centered()
)
#> <div class="position-absolute right-0 translate-middle"></div>

tags$button(
  type = "button",
  .style %>%
    position("relative") %>%
    background_color(theme_primary()),
  "Mail",
  span(
    .style %>%
      position("absolute") %>%
      position_top(0) %>%
      position_right(0) %>%
      position_centered() %>%
      rounded_all("pill") %>%
      background_color(theme_secondary()),
    "+99"
  )
)
#> <button type="button" class="position-relative bg-primary">
#>   Mail
#>   <span class="position-absolute top-0 right-0 translate-middle rounded-pill bg-secondary">+99</span>
#> </button>