fluidRow() alignment

[brucejames]

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

[scottyd22]

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)

[brucejames]

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!

[scottyd22]

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)

[brucejames]

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