如何将Shiny页面中的图片固定在底部居中显示

要实现图片固定在页面底部居中，只需修改图片的style属性，利用CSS的位移特性即可实现，具体调整如下：

修改后的完整代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    fluidRow(
      column(
        width = 12,
        img(
          src ='testfig.png',
          style = 'position: fixed; bottom: 0; width: 45vh; left: 50%; transform: translateX(-50%);'
          )
        )
      )
    )
)

server <- function(input, output, session) {
}

shiny::shinyApp(ui, server)

调整原理 #

• left: 50%：将图片左侧边缘定位到视口水平中点位置
• transform: translateX(-50%)：把图片向左平移自身宽度的50%，让图片中心与视口中心对齐，实现自适应居中
• 该方法不受图片宽度和页面尺寸变化影响，始终保持底部居中效果

内容的提问来源于stack exchange，提问作者Haakonkas