fluidRow() alignment

I am having a problem to align elements within fluidRow().
Below is a simplified example:

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(8, align = "right", plotOutput("plot")), 
    column(4, align = "left", "Place me vertically centered.")
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({ 
    par(mar = c(3, 5.5, 1, 0)) # the 0 is important, to 'glue' both columns
    hist(rnorm(1000)) 
  })
}

shinyApp(ui = ui, server = server)

The result looks like this:

I would like it to look like this:

Can you help me to align the plot and text vertically centered, and to place the plot and the text as close to each other as possible? I tried using the align argument but could not manage.

I really need two separate objects side by side, just typing the text inside the plot is not what I am looking for.

Thank you,
bruce

Below is one approach using CSS.

library(shiny)

ui <- fluidPage(
  fluidRow(
    div(plotOutput('plot'), style = 'width: 80%; display: inline-block; vertical-align: middle;'),
    div(HTML('Place me vertically centered'), style = 'display: inline-block; vertical-align: middle;')
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({ 
    par(mar = c(3, 5.5, 1, 0)) # the 0 is important, to 'glue' both columns
    hist(rnorm(1000)) 
  })
}

shinyApp(ui = ui, server = server)

Thanks @scottyd22 this looks much better!
Last question: How to center both div's? Right now they are aligned on the left side of the webpage, I'd like them at the center.
Thanks!

One way to force the divs to the center is to set left and right margins. The example below sets left and right margins for the fluidRow() at 10% each. Is this what you had in mind?

library(shiny)

ui <- fluidPage(
  fluidRow(style = 'margin-left: 10%; margin-right: 10%;',
    div(plotOutput('plot'), style = 'width: 80%; display: inline-block; vertical-align: middle;'),
    div(HTML('Place me vertically centered'), style = 'display: inline-block; vertical-align: middle;')
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({ 
    par(mar = c(3, 5.5, 1, 0)) # the 0 is important, to 'glue' both columns
    hist(rnorm(1000)) 
  })
}

shinyApp(ui = ui, server = server)

Yes! Thanks for all your help, great.
This can be closed.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.