时间戳

首页 > 解决方案 > 如何在闪亮的另一个 CSS 元素下居中

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

问题描述

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

本质上，我希望在仪表板中显示一些按钮的文本描述，这些按钮显示在文本描述下方的中心。我目前使用 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)

标签： htmlcssrshinydashboard

解决方案

最好将您想要分组的东西包装在 acolumn()中，这样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)

推荐阅读