在闪亮的流体行中水平居中图像 [英] Centering images horizontally in a shiny fluidRow

问题描述

是否可以在闪亮的 ui 流体页面中将三张图像在一行中居中，并将每张图像的宽度固定为 300 像素?获得:

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:

我的一个想法是使用 splitLayout 并以某种方式插入图像作为窗口宽度的函数，但我不确定如何实现这一点.我知道您可以使用 splitLayout 将图像设置为窗口的百分比，但我特别希望中间图像为 300 像素.

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:

但是当我将中间单元格设置为 33% 时，图像之间的差距太大了.

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

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

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.

推荐答案

我设法使用 column 函数修复它，我只是缺少 align="center" 参数与删除配对样式中的宽度参数.例如:

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)

这篇关于在闪亮的流体行中水平居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！