导航栏垂直和居中对齐文本

Question

我对 Shiny Navbar 进行了一些样式更改，使其与附加图像的大小相同。但是，无论我做什么，导航栏选项卡上的文本都不会垂直/居中对齐。任何帮助将不胜感激，因为我对 CSS 非常不熟悉。

    tags$head(tags$script(type="text/javascript", src = "code.js")),
      tags$style(HTML(' .navbar {
                              height: 77.6px;
                              min-height:77.6px !important;
                              font-size: 18px !important;
                              text-align: center !important;
                              text-justify: center !important;
                            }
                            
                        .navbar-nav > li > a, .navbar-brand {
                              padding-top:1px !important; 
                              padding-bottom:1px !important;
                              height: 77.6px;
                            }'
                      )
                 ),
    
      navbarPage(title = "",
                 theme = shinytheme("cerulean")

下图：

我正在寻找的示例：

提前感谢您的帮助:)

Answer 1

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
  height: 77.6px;
  /* Here what you are looking for */
  display: flex;
  align-items: center;
  /* Here what you are looking for */
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>