Center form below table in R Shiny - r

Question

I wish to center a small form below a table that is also centered.
I center the table using, fluidRow and column like so:
fluidRow(
column(12, align="center", reactableOutput("table")),
),
If I do the same with the form, each component of the form becomes centered in the page which is wrong. How do I center a correct looking form beneath the centered table?
Example Code
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 = "joe#example.com"),
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

You need to create 2 div elements and give them CSS properties :
first one is centered
second one is an inline-block and aligned left
Source : CSS: Center block, but align contents to the left
So it gives
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 = "joe#example.com"),
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)