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

Question

我正在尝试在左侧或右侧角上显示图像，并在中心位于同一高度上显示标题。我尝试了下面的代码，然而，我得到了两个不同高度的图像和标题。我想并排显示。

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

然后显示

Answer 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