R Shiny中如何将textInput输入框居中放置在页面中央

Shiny 渲染的textInput默认会生成宽度100%的外层容器，内部输入框也默认撑满容器宽度。你之前给父div设置的text-align-last: center仅对行内块级元素生效，所以同样是行内块的actionButton可以正常居中，占满整行的块级输入框容器不会受这个属性影响。

方案1：Flex布局统一居中（改造成本最低） #

直接把父div的样式替换为flex纵向布局配置，容器内所有子元素（按钮、输入框）都会自动水平居中，还可以通过gap参数统一控制元素间距，不需要额外加<br>标签做换行：

library(shiny)
library(shinyjs)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(collapsed = TRUE),
  dashboardBody(
    useShinyjs(),
    div(id = "hp", 
        style = "display: flex; flex-direction: column; align-items: center; gap: 12px;",
        actionButton("history", "Back To history"),
        textInput("moddname", label = NULL, placeholder = "Name"),
        actionButton("next1", "Next")
    )
  )
)

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

shinyApp(ui, server)

方案2：单独设置textInput居中 #

如果不想调整现有父容器的对齐逻辑，可以单独给textInput设置固定宽度，再通过左右自动外边距实现居中：

# 原有父容器样式保留，把原来的textInput替换为以下代码即可
div(style = "margin: 0 auto;",
    textInput("moddname", label = NULL, placeholder = "Name", width = "280px")
)

注意：textInput默认宽度为100%，如果不设置固定宽度，输入框会撑满整行，不会出现居中的视觉效果。

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