【问题标题】:navbar vertical and center aligning text导航栏垂直和居中对齐文本
【发布时间】:2021-11-06 04:33:51
【问题描述】:

我对 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")

下图:

我正在寻找的示例:

提前感谢您的帮助:)

【问题讨论】:

    标签: css r shiny


    【解决方案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>

    【讨论】:

    • 谢谢!对于那些感兴趣的人-我将display: flex; align-items: center;添加到.navbar-nav &gt; li &gt; a, .navbar-brand { }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-10
    • 1970-01-01
    • 2012-08-16
    • 1970-01-01
    相关资源
    最近更新 更多