如何在使用 {bslib} 创建的 R闪亮应用程序的标题功能区中对齐徽标？

Question

我正在尝试将我公司的徽标添加到使用 {bslib} 制作的 R 闪亮应用程序中。我尝试了不同的方法将此图像添加到“page_navbar”的“title”参数中。添加图像时，它看起来很奇怪，并且更改了标题功能区中其他项目的位置。示例图像和附加徽标。

这是说明问题的演示代码：

library(shiny)
library(bslib)
ui <- page_navbar(
  title = div("My app",
              img(src = "WCTMainLogoWhite_edited.png", height = "57.5px", width = "auto", 
                  style = "position: absolute;
                           top: 1px;
                           right: 2%;")),
  theme = bs_theme(version = 5, bootswatch = "zephyr")|> ##setting the primary color of "zephyr" bootswatch theme manually
    bslib::bs_add_rules(
      rules = "
                    .navbar.navbar-default {
                        background-color: $primary !important;
                    }
                    "
    ),
  nav_panel(title = "Trends",
            layout_columns(
              card(
                full_screen = TRUE,
                card_header(
                  "Card 1")
                )),
              layout_columns(
                card(
                  full_screen = TRUE,
                  card_header("Card 2")),
                card(
                  full_screen = TRUE,
                  card_header("Card 3")),
                col_widths = c(12, 12) 
              )
            ),
  nav_panel(title = "Instructions on use", p("Content to be added"))
)

server <- function(input, output, session) {}

shinyApp(ui, server)

是否有更好的方法来添加图像，使其与标题中的其他项目对齐？ 提前非常感谢！

Answer 1

将项目居中对齐的最佳方法是使用 flex。 将

display: flex

和

align-items: center

添加到父 div。就是这样

如果您想修复现有代码，请将此属性添加到您的徽标中。

1. position: absolute;

   .

2. top: 0

   &

   bottom: 0;

   .

3. margin: auto 0;

   .

我个人最喜欢使用

flex

，如有疑问请进一步询问。干杯。