r - 如何垂直对齐 R Shiny 单选按钮

Question

请就如何将下面应用程序中的按钮排列成一条整齐的直线，同时仍继承列的“中心”对齐方式提供任何指导？我希望保持列的“中心”对齐，以便按钮在“中心对齐标题”下对齐，但是这会以不稳定的方式排列每个选项，具体取决于选项的长度。

library(shiny)

app <- shinyApp(
  ui = fluidPage(
    column(4),
    column(4,
           fluidRow(
             column(12,
                    align = 'center',
                    h6('Center Aligned Title')
                    )
           ),
           fluidRow(
             column(12,
                    align = 'center',
                    # align = 'left', # This justifies/arranges the buttons neatly
                    # but not underneath "Center Aligned Title"
                    radioButtons(
                      inputId = 'my_btns',
                      label = NULL,
                      choices = c('abc','defg','hijllm','no'),
                      selected = character(0),
                      inline = F
                    )
                    )
           )
           ),
    column(4)
  ),
  server = function(input, output) {}
)

runApp(app)

标签： rshiny

Answer 1

您可以插入align = 'center'第二个column()并使用 CSS 来对齐 flexbox 中的单选按钮，如下所示：

app <- shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #my_btns, #my_div {
      display: flex;
      justify-content: center;
      }"
      ))
    ),
    fluidRow(
      column(12,
        align = 'center',
        h6('Center Aligned Title')
      )
    ),
    fluidRow(
      column(12,
        div(
          radioButtons(
            inputId = 'my_btns',
            label = NULL,
            choices = c('abc','defg','hijllm','no'),
            selected = character(0),
            inline = F
          ), id = "my_div")
        )  
    )
  ),
  server = function(input, output) {}
)

结果：