如何使actionBttn与downloadBttn样式一致：图标居上文字居中

你提到的actionBttn默认无法通过原生参数实现和downloadBttn一致的「图标在文字上方+整体居中」布局，确实需要借助CSS来调整。以下是修改后的完整代码，直接替换原UI部分即可实现效果：

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
    dashboardHeader(title = "Old Faithful Geyser Data"),
    dashboardSidebar(
      tags$head(
        tags$style(HTML("
          /* 针对actionBttn的自定义样式 */
          .action-button.btn-simple.btn-sm {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8px 6px; /* 调整内边距适配布局 */
            gap: 2px; /* 图标和文字的间距 */
          }
          .action-button.btn-simple.btn-sm .btn-icon {
            margin-right: 0; /* 移除默认的图标右侧间距 */
          }
        "))
      ),
      menuItem(
        "Results", 
        icon = icon("table"),
        downloadBttn(
          outputId = "saveplot",
          label = "Save plot",
          style = "simple",
          size = "sm"
        ),
        actionBttn(
          inputId = "deleteLocalSave", 
          label = "Reset settings", 
          style="simple", 
          size = "sm",
          color = "danger",
          icon = icon("trash")
        ),
        br(),
        expandedName = "exp_results"
      )
    ),
    dashboardBody()
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

样式说明： #

• 通过flex-direction: column让按钮内的图标和文字垂直排列
• align-items: center和justify-content: center实现整体居中
• 移除图标默认的右侧间距margin-right: 0，避免排版错位
• 调整内边距和元素间距，让布局和downloadBttn视觉一致

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