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