如何在 R Shiny 中对齐图像？答案

【问题标题】：How to align images in R Shiny?如何在 R Shiny 中对齐图像？
【发布时间】：2020-01-02 19:45:12
【问题描述】：

我有一个闪亮的应用程序，其徽标在 titlePanel 中右对齐，另一个徽标在“页脚”中右对齐。我希望两个图像的大小相同，并且我希望它们都右对齐到相同的“垂直线”。

library(shiny)
library(shinythemes)

shinyApp(

  ui <- fluidPage(

    theme = shinytheme("simplex"),

    titlePanel(

      div("Fancy Title",
          actionLink(inputId = "gitLab",
                     label = tags$img(src = "logo_1.svg", width = "40px", height = "40px"),
                     style = "background-size:cover; background-position:center; position:absolute;right:2em",
                     onclick = "window.open('https://github.com/')")

      )

    ), # end titlePanel

    hr(),
    div(
      width = 10,
      a(href = "https://www.rcsb.org/", "Whatever", target="_blank"),

      actionLink(inputId = "ABC",
                 label = tags$img(src = "logo_2.svg", width = "40px", height = "40px"),
                 style = "background-size:cover; background-position:center; position:absolute;right:2em",
                 onclick = "window.open('https://www.rcsb.org/')")

    ),

    br()

  ), # end fluidPage

  server = function(input, output, session){}

) # end shinyApp

到目前为止，我无法将它们向右对齐，因此它们都具有相同的“x 坐标”。救命！

【问题讨论】：

标签： css r shiny

【解决方案1】：

我在 CSS 方面的经验有限，但我相信将其中一种添加到您的样式中可能会解决您的问题：

style = 'float:right;'

或

style = 'text-align:right;'

或

style='位置：绝对； right:42px;'（根据需要调整像素）

希望这会有所帮助。

【讨论】：