Html 垂直对齐图像

Html 垂直对齐图像,html,css,r,shiny,Html,Css,R,Shiny,我试图垂直对齐Shiny中tabPanel第二列中的图像。我已设法将其水平对齐(使用align=“center”),但如果不插入几个br(),则无法垂直对齐。我高度怀疑一定有一个更优雅的解决方案来做到这一点。下面是我的代码示例(不包括br()。如有任何建议,将不胜感激。提前感谢您的帮助 mainPanel( tabsetPanel(type = "tabs", tabPanel("Plot&qu

我试图垂直对齐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"))
            )

一个不太好的解决方案,可以大大减少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 ammount 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)
库(闪亮)
图书馆(purrr)

谢谢。我试了你的建议,效果很好。比多个br()更优雅!我想知道是否可以用html包装img命令,但我没有找到一个例子。我编辑了这篇文章,以包含html的方式,希望它是有用的。谢谢!这符合我的想法。唯一的问题是,它使图像非常大。基本上,它填充了整个列。我想保持原来的大小,只是让它在列中水平和垂直居中。因此,我厌倦了设置“高度:140像素”而不是400像素,还添加了“宽度:140像素(保持原始图片的大小)”,但没有任何效果。它仍然占据了整个专栏。我用正确的大小更新了代码。谢谢!这正是我想要的。看起来首先需要将表格单元格的大小设置为大于图片的大小,这是我以前没有做过的。
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)