如何在闪亮的另一个 CSS 元素下居中

Question

我正在设计一个闪亮的应用程序，并且有一个绝对面板，我希望它具有仪表板式的外观。

基本上，我希望在仪表板中显示一些按钮的文本描述，这些按钮显示在文本描述下方的中心。我目前使用 CSS 中的绝对位置控件来确定面板内的位置。虽然这目前有效，但我认为这不是一种特别可扩展的方法。

我附上了一些可重现的代码，以便您了解我在说什么。

非常感谢您的帮助。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  absolutePanel(
    id = "quick-glance", style="z-index:500; opacity: 0.90",
    class = "panel panel-default",
    draggable=TRUE,
    fixed=TRUE,
    width = 180,
    height = 75,
    top = 20, left = 50,

    textOutput("label1"), tags$head(tags$style("#label1{
                                               color: steelblue;
                                               font-weight: bold; 
                                               border: none;
                                               position: absolute; top: 5px; left: 30px;
                                               ")),
    actionBttn("bttn1",label = "$##",style = "bordered",color = "primary"),
    tags$head(tags$style("#bttn1{ position: absolute; bottom: 5px; left: 20px;}")),

    textOutput("label2"),tags$head(tags$style("#label2{
                                              color: steelblue;
                                              font-weight: bold; 
                                              border: none;
                                              position: absolute; top: 5px; left: 100px;
                                              ")),
    actionBttn("bttn2",label = "#",style = "bordered",color = "danger"),
    tags$head(tags$style("#bttn2{ position: absolute; bottom: 5px; left: 110px;}"))


    )
    )

server <- function(input, output, session) {
  output$bttn1 = renderPrint(input$bttn1)
  output$label1 = renderText("Text")

  output$label2 = renderText("Text Text")
  output$bttn2 = renderPrint(input$bttn2)

}

shinyApp(ui, server)

Answer 1

最好将您想要分组的内容包装在 column() 中，这会创建一个 div，然后您可以居中。然后，在每个这样的div 中，您可以将文本和按钮居中。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  absolutePanel(
    id = "quick-glance", style="z-index:500; opacity: 0.90",
    class = "panel panel-default",
    draggable=TRUE,
    fixed=TRUE,
    width = 180,
    height = 75,
    top = 20, left = 50,
    fluidRow(
      column(
        textOutput("label1"), 
        actionBttn("bttn1",label = "$##",style = "bordered",color = "primary"),
        width = 1
      ),
      column(
        textOutput("label2"), 
        actionBttn("bttn2",label = "#",style = "bordered",color = "danger"),
        width = 1
      )
    ),
    tags$head(tags$style(".col-sm-1 {width: 50%; margin: 0px;}
                          #label1, #bttn1, #label2, #bttn2 {margin: 0 auto; width: 100%; text-align: center}"))
  )
)

server <- function(input, output, session) {
  output$bttn1 = renderPrint(input$bttn1)
  output$label1 = renderText("Text")

  output$label2 = renderText("Text Text")
  output$bttn2 = renderPrint(input$bttn2)

}

shinyApp(ui, server)