在闪亮的相同高度上显示图像和标题

【问题标题】：Display image and title on same height in shiny在闪亮的相同高度上显示图像和标题
【发布时间】：2017-11-02 03:00:59
【问题描述】：

我正在尝试在左角或右上角显示图像，并在相同高度的中心显示标题。我尝试了以下代码，但是，我得到了两个不同高度的图像和标题。我想并排显示。

server.r

shinyServer(function(input, output, session){

})

ui.r

shinyUI(fluidPage(
  titlePanel(
    headerPanel( title=div(img(src="bigorb.png",  height = 100, width = 100),
                           h3("Image Display Test", align="center", style="bold")
                           ))
    )
  ))

它会显示

【问题讨论】：

headerPanel(title=div(img(src="bigorb.png", height = 100, width = 100), "图像显示测试"))

标签： r shiny

【解决方案1】：

你可以尝试做这样的事情：

library(shiny)
ui <- shinyUI(fluidPage(shinyjs::useShinyjs(),
                        tags$link(rel = "stylesheet", type = "text/css", href = "custom-div.css"),
  h3(
    div(style="display:inline-block;",img(src="bigorb.png", height = 150, width = 150,style="left;")),
    div(id="smile","Image Display Test")
  ),
  br(),
  sidebarLayout(
    sidebarPanel(
      textInput("length",
                "Enter your length:"),
      textInput("weight",
                "Enter your weigth:")
    ),
      mainPanel(
      htmlOutput("testHTML")
    )
  )
))

和 .css 文件。您可以在闪亮的 R here 中找到您需要的有关 .css 文件的所有信息。

#smile {
  position: absolute;
  width: 300px;
  height: 150px;
  left: 50%;
  margin: -100px 0 0 -150px;
}

我希望它对大家有用并继续编码！ PS：我刚刚关注了这个post

【讨论】：

好的，我要编辑我的答案，等一下。