将图像水平居中放置在闪亮的流体中

Question

是否可以将三个图像置于闪亮的ui fluidPage中的一行中并且每个图像的宽度固定为300px？得到：

我有一个想法是使用splitLayout并以某种方式插入图像作为窗口宽度的函数，但我不知道如何实现这一点。我知道你可以使用splitLayout将图像设置为窗口的百分比，但我特别希望中间图像为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")), ...

所以问题是我让图像偏离中心：

但是当我将中间单元设置为33％时，说明图像之间的间隙太大了。

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"))

所以我所追求的是cellWidths = c((windowWidth-300)/2, 300, (windowWidth-300)/2)，但我不知道如何提取windowWidth。

Answer 1

我设法使用列函数修复它，我只是错过了align="center"参数，并删除了样式中宽度参数的删除。例如：

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)

Answer 2

这样的东西？

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)