如何让bsButton组件内的文本实现居中对齐？

你之前直接给#helpsect加text-align:center没生效，是因为bsButton渲染后，按钮文本被包裹在<span>子元素里，默认样式优先级更高，覆盖了你的设置。可以用以下两种方式解决：

方法1：定位按钮内部文本容器 #

修改CSS样式，针对按钮内的<span>标签设置样式，让文本占满按钮宽度并居中：

#helpsect{margin-top:50px;padding-left:1px;}
#helpsect span {
  text-align: center;
  width: 100%;
}

方法2：用Flex布局实现居中 #

给按钮设置Flex布局，让内部内容自动居中，这种方式更简洁：

#helpsect{
  margin-top:50px;
  padding-left:1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

修改后的完整代码 #

library(shinyBS)
library(shiny)

# 假设liste_sect是已定义的选项列表
liste_sect <- c("选项1", "选项2", "选项3")

ui <- sidebarLayout(sidebarPanel(
  width = 4,
  tags$style(HTML(
    '#helpsect{
      margin-top:50px;
      padding-left:1px;
      display: flex;
      align-items: center;
      justify-content: center;
    }'
  )),
  fluidRow(column(
    width = 8,
    br(),
    selectInput(
      inputId = "choixsect",
      label = HTML('<p style="color:;">Secteur de comparaison :'),
      choices = liste_sect,
      width = "250px"
    )
  ),
  column(
    width = 4,
    bsButton(inputId = "helpsect", label = "En savoir plus")
  )),
  sidebarPanel(width = 8)
))

server <- function(input, output) {}

shinyApp(ui, server)

修改后，按钮内的"En savoir plus"文本就会居中显示。

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