切换fluidPage为page_fluid后text-align失效问题求助

问题核心是page_fluid默认采用Bootstrap 5布局规则，和fluidPage默认的Bootstrap 3样式逻辑不同，仅设置text-align: center无法让图标实现垂直居中。以下是两种可行的修复方案：

方法1：自定义flex布局样式 #

通过给按钮添加flex布局相关样式，强制图标水平垂直双居中：

library(shiny)
library(bslib)

ui <- page_fluid(  
  layout_columns(col_widths = c(10, 2),
                 textInput("text", NULL, placeholder = "Name"),
                 actionButton("ab", NULL, icon = icon("plus"), 
                              style = "height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;")
  ),
  actionButton("ab1", NULL, icon = icon("plus"), 
               style = "height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;")
)

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

shinyApp(ui, server)

方法2：使用Bootstrap 5工具类 #

利用bslib内置的Bootstrap工具类，无需手写复杂样式：

library(shiny)
library(bslib)

ui <- page_fluid(  
  layout_columns(col_widths = c(10, 2),
                 textInput("text", NULL, placeholder = "Name"),
                 actionButton("ab", NULL, icon = icon("plus"), 
                              class = "h-100 d-flex align-items-center justify-content-center p-0")
  ),
  actionButton("ab1", NULL, icon = icon("plus"), 
               class = "h-100 d-flex align-items-center justify-content-center p-0")
)

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

shinyApp(ui, server)

关键说明 #

• display: flex（对应工具类d-flex）让按钮内部启用flex布局模式
• align-items: center（align-items-center）实现图标垂直居中
• justify-content: center（justify-content-center）实现图标水平居中
• padding: 0（p-0）移除按钮默认内边距，避免图标位置偏移

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