Centering images horizontally in a shiny fluidRow

问题

Is it possible to centre three images in one row within the shiny ui fluidPage AND have the width of each image fixed at 300px? To get:

One idea I had was to use splitLayout and somehow insert an image as a function of window width but I am not sure how to acheive this. I understand you can use splitLayout to set the images as a % of window, however I specifically want the middle image to be 300px.

fluidPage(fluidRow(
    splitLayout(cellWidths = c("34%", 300, "34%"), cellArgs = list(style = "padding: 0px"), style = "border: 0px; padding: 0px;",
       div(img(src="image1", height=300, width=300, align="right"),
       div(img(src="image2", height=300, width=300, align="center"),
       div(img(src="image3", height=300, width=300, align="left")), ...

So the problem is I get images are off centre:

But when I set the middle cell as 33% say then the gap between the images is too large.

splitLayout(cellWidths = c("34%", "33%", "34%"), cellArgs = list(style = "padding: 0px"), style = "border: 0px; padding: 0px;",
div(img(src="image1", height=300, width=300, align="right"),
div(img(src="image2", height=300, width=300, align="center"),
div(img(src="image3", height=300, width=300, align="left"))

So what I am after is cellWidths = c((windowWidth-300)/2, 300, (windowWidth-300)/2) but I am not sure how to extract the windowWidth.

回答1:

I managed to fix it using the column function, I was simply missing the align="center" argument paired with the removal of the width argument in the style. For example:

library(shiny)

server = function(input, output, session) {}

ui <- fluidPage(fluidRow(
         column(12, align="center",
                div(style="display: inline-block;",img(src="image1", height=300, width=300)),
                div(style="display: inline-block;",img(src="image2", height=300, width=300)),
                div(style="display: inline-block;",img(src="image3", height=300, width=300))))
)


shinyApp(ui = ui, server = server)

回答2:

Something like this?

rm(list = ls())
library(shiny)

server = function(input, output, session) {}

ui <- fluidPage(fluidRow(
  #Change column(x, for desired width
  column(6,
         div(style="display: inline-block; width: 33%;",img(src="https://cran.r-project.org/Rlogo.svg", height=300, width=300)),
         div(style="display: inline-block; width: 33%;",img(src="https://cran.r-project.org/Rlogo.svg", height=300, width=300)),
         div(style="display: inline-block; width: 33%;",img(src="https://cran.r-project.org/Rlogo.svg", height=300, width=300))))
)


shinyApp(ui = ui, server = server)

来源：https://stackoverflow.com/questions/47551311/centering-images-horizontally-in-a-shiny-fluidrow

标签

user-interface

Shiny