如何在Shiny的modalDialog中居中对齐标题与按钮？

你可以通过以下两种方式调整模态框的标题和默认关闭按钮的对齐方式：

方式一：内联样式直接修改 #

直接在modalDialog中指定底部容器的样式，同时强化标题的居中效果：

modalDialog(
  style = "text-align:center;",
  title = div("Welcome!", style = "text-align: center; margin: 0 auto;"),
  shinyWidgets::actionBttn(inputId = ns("start"),
                           label = "Start",
                           style = "jelly",
                           color = "danger"),
  footer = div(modalButton("Dismiss"), style = "text-align:center; width:100%;")
)

方式二：全局CSS样式（适合多模态框场景） #

如果应用里有多个模态框需要统一样式，可在UI中添加全局CSS规则：

tags$style(HTML("
  .modal-title {
    text-align: center !important;
    width: 100%;
  }
  .modal-footer {
    justify-content: center !important;
  }
"))

之后模态框代码可以简化为：

modalDialog(
  style = "text-align:center;",
  title = "Welcome!",
  shinyWidgets::actionBttn(inputId = ns("start"),
                           label = "Start",
                           style = "jelly",
                           color = "danger")
)

关键说明 #

• 标题默认的.modal-title类自带左对齐样式，通过text-align: center !important强制覆盖，设置宽度100%确保占满标题栏空间。
• 模态框底部的.modal-footer默认用justify-content: flex-end实现右对齐，修改为justify-content: center即可让关闭按钮居中。

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