Center align Shiny box header with HTML or 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\">",
      })
    }

In the above code the Last updated at and filetime are not getting center aligned, upon further research I found that center tag does not work on HTML5, not sure if that's causing the problem.

As a workaround, I added a div and class to center align the text via css, here is my 2nd attempt.

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

In both my attepmt, I am able to change color, font size, margin etc, but not able to center align the text. Any help?

Solution

You don't need to add custom class, as the textOutput already has a unique id final_text. Working example:

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)

Comments

[Vasim]

The final_text gets center align, I need the header of the box to be center aligned. Thanks

[Vasim]

This does create the class however, the box title is is not yet center align

[Xiongbing Jin]

Updated answer.

[Vasim]

Yup, the box header is center align, but all boxes on the chart gets center align. I only want the #final_text box to be center aligned