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

我有两个按钮在我的列中水平居中，但无法弄清楚如何垂直居中。我尝试使用“垂直对齐中间”。下面是我的用户界面代码：

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;
         }

I end up getting a really weird looking UI with both buttons centered, but one is large and is the height of the entire column div.

您可以通过以下方式执行此操作：

 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)