Shiny导航栏文本垂直居中对齐问题求助

你遇到的问题很常见——Bootstrap导航栏的默认样式在自定义高度后，单纯调整上下内边距没法完美实现文本垂直居中。这里给你两个可靠的解决方案，都是通过CSS调整来实现：

方案1：Flex布局（推荐，适配所有文本情况） #

这种方法不管文本是单行还是多行，都能稳定实现垂直居中，替换你原来的tags$style代码即可：

tags$style(HTML('
  .navbar { 
    height: 77.6px; 
    min-height: 77.6px !important; 
    font-size: 18px !important;
  }
  .navbar-nav > li > a, .navbar-brand { 
    height: 77.6px;
    display: flex;
    align-items: center; /* 核心：垂直居中对齐 */
    padding: 0 15px !important; /* 只保留左右内边距，避免上下padding干扰居中 */
  }
')),

方案2：Line-height（适合单行文本） #

如果你的导航栏文本都是单行的，也可以用行高等于导航栏高度的方式，代码更简洁：

tags$style(HTML('
  .navbar { 
    height: 77.6px; 
    min-height: 77.6px !important; 
    font-size: 18px !important;
  }
  .navbar-nav > li > a, .navbar-brand { 
    height: 77.6px;
    line-height: 77.6px !important; /* 行高等于容器高度，单行文本自动居中 */
    padding: 0 15px !important;
  }
')),

为什么原来的代码没生效？ #

你之前设置的text-align: center是控制水平居中，而垂直居中需要调整元素的对齐方式。另外，上下内边距会占用容器高度，导致文本实际可用空间变小，所以换成只保留左右内边距会更稳妥。

你可以根据自己的实际情况选择其中一种方案测试，应该就能解决文本垂直居中的问题啦！

内容的提问来源于stack exchange，提问作者Lucas