时间戳

首页 > 解决方案 > 在 Shiny 中垂直对齐图像

html - 在 Shiny 中垂直对齐图像

问题描述

我正在尝试在 Shiny 的 tabPanel 的第二列中垂直对齐图像。我已经设法将它水平对齐（使用 align="center"），但如果不插入几个 br() 就无法垂直对齐它。我高度怀疑必须有一个更优雅的解决方案来做到这一点。下面是我的代码示例（不包括 br()）。任何建议，将不胜感激。在此先感谢您的帮助！

mainPanel(
            tabsetPanel(type = "tabs",
                        tabPanel("Plot", 
                                 column(width = 6,
                                        plotOutput("plot")),
                                 column(width = 6, align="center",
                                        img(src = "image.jpg", height=140, width=140),
                                        )),
                        tabPanel("Summary", verbatimTextOutput("summary")),
                        tabPanel("Table", tableOutput("table"))
            )

标签： htmlcssrshiny

解决方案

一个不太好的解决方案可以大大减少 br() 拥塞：

library(shiny)
library(purrr)

n_br <- 17

ui <- fluidPage(
    mainPanel(
        tabsetPanel(type = "tabs",
                    tabPanel("Plot", 
                             column(width = 6,
                                    plotOutput("plot")),
                             column(width = 6, align="center",
                                    map(1:n_br, ~br()), #add n number of br() 
                                    img(src = "image.jpg", height=140, width=140),
                             )),
                    tabPanel("Summary", verbatimTextOutput("summary")),
                    tabPanel("Table", tableOutput("table"))
        )
))

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

编辑：

按照本教程并使用闪亮的标签功能：

library(shiny)
library(tidyverse)


ui <- fluidPage(
    
    
    mainPanel(
        tabsetPanel(type = "tabs",
                    tabPanel("Plot", 
                             column(width = 6,
                                    plotOutput("plot")),
                             column(width = 6, align = "center",
                                    tags$style(HTML('
                                        .verticalcenter {
                                        display: table-cell;
                                        height: 400px;
                                        vertical-align: middle;
                                        }')),
                                    tags$div(class = "verticalcenter", img(src = "image.png", height = "140px", width = "140px"))
                             )),
                    tabPanel("Summary", verbatimTextOutput("summary")),
                    tabPanel("Table", tableOutput("table"))
        )
    ))

server <- function(input, output, session) {
    
    output$plot <- renderPlot(plot(iris$Sepal.Length, iris$Petal.Length))
}

shinyApp(ui, server)

推荐阅读