html - 使用 HTML 或 CSS 居中对齐 Shiny 框标题

    library(shiny)
    library(shinydashboard)
    filetime <- format(file.mtime("mydata.csv"), format = "%a %e-%b-%Y %r IST")

    ui <- dashboardPage(
      dashboardHeader(title = "Recruitment"),
      dashboardSidebar(),
      dashboardBody(
        shinyUI(fluidPage(
         box(verbatimTextOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
    ))))

    server <- shinyServer(function(input, output, session) {
      output$final_text <- renderText({
        HTML(paste("<center>","Last updated at", filetime, "</center>")) #"<font size=\"2\">",
      })
    }

在上面的代码中，Last updated at and filetime 没有居中对齐，经过进一步研究，我发现 center 标签在 HTML5 上不起作用，不确定这是否导致了问题。

作为一种解决方法，我添加了一个 div and class 以通过 css 将文本居中对齐，这是我的第二次尝试。

#Next to fluidPage
tags$style(HTML(".man_made_class{color:#f2f205; text-align: center;}")),
#Then further in Output
  output$final_text <- renderText({
    HTML(paste("<div class= man_made_class>","Last updated at", filetime, "</div>")) #"<font size=\"2\">",
  })

在我的尝试中，我可以更改 color 、 font size 、 margin 等，但无法将文本居中对齐。有什么帮助吗？

最佳答案

您不需要添加自定义类，因为 textOutput 已经有一个唯一的 id final_text 。工作示例:

library(shiny)
library(shinydashboard)
filetime <- format(file.mtime("mydata.csv"), format = "%a %e-%b-%Y %r IST")

ui <- dashboardPage(
  dashboardHeader(title = "Recruitment"),
  dashboardSidebar(),
  dashboardBody(
    shinyUI(fluidPage(
      tags$head(tags$style(HTML("
                                #final_text {
                                  text-align: center;
                                }
                                div.box-header {
                                  text-align: center;
                                }
                                "))),
      box(verbatimTextOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
    ))))

server <- shinyServer(function(input, output, session) {
  output$final_text <- renderText({
    HTML(paste("Last updated at", filetime))
  })
})
shinyApp(ui = ui, server = server)

关于html - 使用 HTML 或 CSS 居中对齐 Shiny 框标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40195703/