r - R Shiny 表格下方的中心表格

Question

我希望在同样居中的表格下方居中放置一个小表单。 我使用 fluidRow 和 column 将表格居中，如下所示:

fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),

如果我对表单执行相同的操作，表单的每个组件都会在页面中居中，这是错误的。如何将外观正确的表单置于居中的表格下方？

示例代码

library(shiny)
library(reactable)

ui <- fluidPage(
  fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),
  fluidRow(  
    column(12, 
           div(id = "form", 
               textInput("email", "Email", width = "250px", placeholder = "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b8bdb792b7aab3bfa2beb7fcb1bdbf" rel="noreferrer noopener nofollow">[email protected]</a>"),
               radioButtons(inputId = "pref", 
                            label ="Here's a label:",
                            choiceNames = list(
                              "First choice", 
                              "Second choice"),
                            choiceValues = list(
                              "v1", "v2"
                            )),
               actionButton("submit", "Enter", class = "btn-primary", width = 250, 
                            style="color: #FFF; background-color: #132EBA;"),
             
            )
    )
  )
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              fullWidth = FALSE)
  })
  
  observeEvent(input$submit, {
    # Do something!
  })
}

shinyApp(ui, server)

Answer 1

您需要创建 2 个 div 元素并赋予它们 CSS 属性:

• 第一个居中
• 第二个是内联 block ，左对齐

来源:CSS: Center block, but align contents to the left

所以它给出了

library(shiny)
library(reactable)

ui <- fluidPage(
  fluidRow(
    column(12, align="center", reactableOutput("table")),
  ),
  fluidRow(  
    column(12, 
           div(id = "form", 
               style = "text-align: center;",
               div(
                 id = "form_content",
                 style = "display:inline-block; text-align: left;",
                 textInput("email", "Email", width = "250px", placeholder = "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a30353f1a3f223b372a363f74393537" rel="noreferrer noopener nofollow">[email protected]</a>"),
                 radioButtons(inputId = "pref", 
                              label ="Here's a label:",
                              choiceNames = list(
                                "First choice", 
                                "Second choice"),
                              choiceValues = list(
                                "v1", "v2"
                              )),
                 actionButton("submit", "Enter", class = "btn-primary", width = 250, 
                              style="color: #FFF; background-color: #132EBA;")
               )
           )
    )
  )
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              fullWidth = FALSE)
  })
  
  observeEvent(input$submit, {
    # Do something!
  })
}
shinyApp(ui, server)