使用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没有居中对齐。经过进一步研究，我发现HTML5中center标签不起作用，不确定是否是导致问题的原因。

为了解决这个问题，我通过CSS添加了一个div和class来居中对齐文本，以下是我的第二个尝试。

#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\">",
  })

在我的尝试中，我能够更改颜色、字体大小、边距等内容，但无法将文本居中对齐。有什么帮助吗？

- Vasim

Answer 1

您不需要添加自定义类，因为textOutput已经有了一个唯一的idfinal_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)

- Xiongbing Jin

---

最终文本居中对齐，我需要盒子的标题居中对齐。谢谢。 - Vasim

更新的答案。 - Xiongbing Jin

是的，盒子的标题是居中对齐的，但图表上的所有盒子都居中对齐。我只想让 #final_text 盒子居中对齐。 - Vasim

Answer 2

更改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>"
            })
    }) 

- Valter Beaković

---

这会创建类，但是框标题尚未居中对齐。 - Vasim