使用 HTML 或 CSS 居中对齐闪亮框标题

Question

    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，但无法居中对齐文本。有什么帮助吗？

Answer 1

您不需要添加自定义类，因为 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)