将闪亮框 header 与 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

对 ui.R 和 server.R 的更改有帮助吗？

ui.R

    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$style(HTML(".man_made_class{color:#f2f205; text-align: center;}")),
                            box(htmlOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
                    ))))

server.R

server <- shinyServer(function(input, output, session) {
            output$final_text <- renderText({
                    "<div class= man_made_class>Last updated at xxxx</div>"
            })
    })

Answer 2

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

将闪亮框 header 与 HTML 或 CSS 居中对齐

Center align Shiny box header with HTML or CSS

html

css

r

shiny

shinydashboard