R Shiny：如何调整InfoBox（含图标）对齐及实现标题-框布局？

因为shinydashboard的infoBox组件确实没有直接的style参数，但可以通过两种方式实现标题在蓝色InfoBox上方、数值在框内的效果：

方法一：自定义CSS修改现有InfoBox布局 #

通过CSS调整InfoBox内部元素的排列顺序和位置，把标题移到上方，同时让数值和图标在框内居中。在UI部分添加自定义样式：

dashboardBody(
  # 自定义CSS
  tags$style(HTML("
    /* 让InfoBox采用垂直排列 */
    .info-box {
      flex-direction: column;
      align-items: stretch;
    }
    /* 把标题移到最上方 */
    .info-box-title {
      order: -1;
      margin: 10px 15px;
      text-align: center; /* 可选：让标题居中显示 */
    }
    /* 让内容区（数值+图标）居中填充剩余空间 */
    .info-box-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 调整图标位置（可选） */
    .info-box-icon {
      margin-right: 15px;
    }
  ")),
  # 你的InfoBox输出
  infoBoxOutput("BOX")
)

原有server端代码可保持不变，CSS会自动作用到所有infoBox；如果需要精准控制单个组件，可给目标infoBox加自定义类：

# server端给infoBox添加自定义类
output$BOX<- shinydashboard::renderInfoBox({
  infoBox(
    title = "Percent BNPX",
    icon = icon("fa-solid fa-laptop-file"),
    value = perc_muc(),
    width = boxwidth,
    color = "blue",
    fill  = booleanfill,
    class = "custom-info-box" # 自定义类名
  )
})

对应CSS里把.info-box替换为.custom-info-box即可，避免影响其他infoBox。

方法二：手动构建自定义InfoBox结构 #

如果需要更灵活的控制，可直接用HTML元素模拟infoBox样式，完全自定义布局：

# server端渲染自定义InfoBox
output$BOX <- renderUI({
  div(
    # 复用shinydashboard的infoBox样式类
    class = paste0("info-box bg-blue", if(booleanfill) " bg-blue-active" else ""),
    style = paste0("width: ", boxwidth, "%;"),
    # 标题放在最上方
    div(class = "info-box-title", "Percent BNPX"),
    # 内容区包含图标和数值
    div(class = "info-box-content",
        icon("fa-solid fa-laptop-file", class = "info-box-icon"),
        div(class = "info-box-text", perc_muc())
    )
  )
})

# UI部分调用输出
dashboardBody(
  uiOutput("BOX")
)

这种方式无需额外CSS，直接复用shinydashboard内置样式类，同时可自由调整每个元素的位置和样式。

内容的提问来源于stack exchange，提问作者T2029