Как вертикально расположить кнопки в центре блестящего приложения?

Question

У меня есть две кнопки, центрированные по горизонтали в моей колонке, но я так и не смог понять, как центрировать их по вертикали. Я попытался использовать «вертикальное выравнивание по центру». Вот мой код пользовательского интерфейса ниже:

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

В итоге я получил действительно странный интерфейс с обе кнопки расположены по центру, но одна из них большая и является высотой всего столбца 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)