如何在闪亮的应用程序中垂直居中操作按钮？

Question

我有两个按钮在我的列中水平居中，但还无法弄清楚如何垂直居中。我尝试使用“vertical-align-middle”。下面是我的 UI 代码：

ui <- shinyUI(fluidPage(
  tags$style(
    HTML('
         #buttons {
         background-color:yellow; position:fixed; margin-bottom:50px; vertical-align: middle; opacity:1; height:50px; z-index:5;
         }

         #fluidrow1 {
        height:50px;
         }

         ')
    ),
    fluidRow(id="fluidrow1",
      column(12, align="center", id="buttons",
             actionButton("test1", "Test1"),
             actionButton("rmd2", "RMD2")
      )
    )
  ,uiOutput("uioutput")

))

当我尝试单独执行第一个按钮时，使用以下代码：

 #test1 {
        height:50px; vertical-align: middle;
         }

我最终得到了一个看起来非常奇怪的 UI，两个按钮都居中，但一个很大并且是整个列 div 的高度。

Answer 1

您可以这样做：

 display: flex;
 align-items: center;
 justify-content: center;

而不是vertical-align: middle;

所以它会是这样的：

library(shiny)

ui <- shinyUI(fluidPage(
  tags$style(
    HTML('
         #buttons {
         background-color:yellow; position:fixed; margin-bottom:50px; opacity:1; height:50px; z-index:5;
         display: flex;
         align-items: center;
         justify-content: center;
         }

         #fluidrow1 {
        height:50px;
         }

         ')
  ),
  fluidRow(id="fluidrow1",
           column(12, align="center", id="buttons",
                  actionButton("test1", "Test1"),
                  actionButton("rmd2", "RMD2")
           )
  )
  ,uiOutput("uioutput")

))



server <- function(input, output, session) {

}


shinyApp(ui, server)