How to vertically justify R Shiny radioButtons - r

Question

Any guidance please on how to arrange the buttons in the app below into a neat straight line while still inheriting the ‘center’ alignment from the column? I am looking to keep the column’s ‘centre’ alignment so that the buttons line up under the “Center Aligned Title”, however this then lines up each choice in an erratic manner, dependent on the length of the choice.
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)

Answer 1

You could drop align = 'center' in the second column() and use CSS to align the radio buttons in a flexbox like this:
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) {}
)
Result: