R Shinydashboard 框中的垂直居中文本

Question

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

最有希望的是，我看到了创建带有 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 中所指的内容。

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

是的，你可以。好吧，如果您想更改第二个框，例如在标签、classes 和 id 中查找某些内容，以隔离您要更改的框。对于第二个框，我会查看 class col-sm-6 和 class 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);
}

这就是它的样子

R Shinydashboard 框中的垂直居中文本

Vertically centering text within an R Shinydashboard box

r

shiny

shinydashboard