在 R Shinydashboard 框中垂直居中文本

Question

我不知道如何使用 R 闪亮的仪表板在“框”内垂直对齐文本。我知道you can't vertically align text inline using e.g., span。填充对我不起作用（尽管我可能做错了）。

最有希望的是，我看到this 建议使用 flex 显示创建标签样式——但它只能使文本水平居中，而不是垂直居中！也许我将样式信息添加到错误的地方。下面是一些显示问题的“app.R”代码：

# ------------------------------------------------------------------------------
# SET-UP

library(shiny)          # shiny application
library(shinydashboard) # shiny dashboard toolkit

rm(list = ls()) # remove variables from working environment
shinyOptions(cache = cachem::cache_disk("./app_cache/cache/"))

boxHeight = "30em" # Box height

# ------------------------------------------------------------------------------
# CREATE DASHBOARD

# Header content
header <- dashboardHeader(
  title = span("Play Dashboard", 
               style = "color: white; font-size: 28px"), 
  disable = FALSE, 
  titleWidth  = 550
)

# Sidebar content
sidebar <- dashboardSidebar(
  width = 260,
  collapsed = TRUE,
  sidebarMenu(
    menuItem("Dashboard Tab 1", tabName = "tab1", icon = icon("tachometer-alt"))
  )
)

# Body content
body <- dashboardBody(
  # Here, I try to implement the earlier Stack Overflow suggestion
  tags$style(HTML('
            #textbox {
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            }
        ')),
  tabItems(
    # 1ST TAB: KEY ECONOMIC INDICATORS
    tabItem(tabName = "tab1",
            fluidRow(
              box(height = boxHeight,
                  id = "textbox",
                  "This isn't vertically centered."),
              box(
                height = boxHeight,
                id = "textbox",
                span("This isn't vertically centered, either.", id="textbox"),
              ),
              box(height = boxHeight,
                  span("Nor is this!", id="textbox")),
              box(height = boxHeight,
                  "But they're all horizontally centered, unlike this ...")
            )
    )
  )
)

server <- function(input,output){
}

#Dashboard page
dashboard <- dashboardPage(header, sidebar, body, tags$head(tags$style(HTML('* {font-family: "Lucida Sans"}!important;'))))

shinyApp(dashboard, server)

任何帮助将不胜感激！

Answer 1

您只需将dashboardBody() 的标签中的#textbox 更改为.box。你就在那里。

那么为什么，为什么，为什么？ id textbox 实际上只是封装了 span 封装的内容。所以你真的一直垂直居中。但是，如果您想使整个框中的文本居中，则需要上一级。我使用开发者工具来找出哪个 id 或 class 可以工作。

注意突出显示 - 这就是您使用 #textbox 所指的内容

注意突出显示 - 这就是您使用 .box 所指的内容。

好的，您询问了有关更改 cmets 中的一个特定框的问题。所以我添加了以下内容：

是的，你可以。好的，如果您想更改第二个框，例如，在标签、类和 ID 中查找可以隔离您要更改的框的内容。对于第二个框，我会查看 col-sm-6 类和 box 类。

要设置此框及其他的标签，您可以将 HTML 标签设置为.col-sm-6 + .col-sm-6 div.box{css here}。如果您只想更改该框，则使用相同的方法将 CSS 翻转回来。这就是dashboardbody() 中的样子。 （对于本例，我将tabItem 中第二个box 中的id 更改为“textbox2”。）：

.box {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
.col-sm-6 + .col-sm-6 div.box {       
font-weight: bold;
transform: rotate(-25deg);
}
.col-sm-6 + .col-sm-6 + .col-sm-6 div.box {       
font-weight: normal;
transform: rotate(0deg);
}
#textbox2 {
transform: rotate(25deg);
}

这就是这个样子