Shiny应用Navbar标签页与两侧图片高度对齐调整方法

当前导航栏高度错位是默认Bootstrap导航栏内置边距、冗余HTML标签、全局样式边距叠加导致的，按以下步骤调整即可实现等高对齐：

具体调整步骤 #

• 首先删除无效HTML标签：现有代码中selected参数和首个tabPanel的HTML文本末尾多写了无匹配开标签的</p>，这个冗余标签会额外生成块级间距撑高标签栏，直接删除两处多余的</p>即可。
• 替换CSS样式：清空现有www/styles.css中的代码，替换为以下针对性样式：

/* 导航栏容器适配80px高的左侧logo，启用flex布局实现垂直居中 */
.navbar > .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  min-height: 80px;
}

/* 清除全局图片默认上边距，避免边距叠加 */
img {
  margin-top: 0 !important;
}

/* 左侧logo区域边距重置 */
.navbar-header .navbar-brand {
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
}

/* 导航标签高度重置，移除默认上下内边距，和logo高度匹配 */
.navbar-nav > li > a {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 70px;
  height: 70px;
  display: flex;
  align-items: center;
}

/* 右侧logo组垂直居中对齐 */
.navbar-right {
  display: flex;
  align-items: center;
  height: 80px;
}

• 调整左侧logo内联样式：删除UI代码中title部分img标签内的margin-top:10px和padding-bottom:25px属性，修改后代码如下：

title = div(
  img(src='imi-pono-title-graphic_blank_no_year.png',
      style="padding-right:10px",
      height = 80)
)

调整逻辑说明 #

• 采用flex布局强制导航栏内左侧logo、中间标签栏、右侧logo组三个模块垂直居中对齐，避免不同元素的边距计算偏差
• 移除Bootstrap默认给导航标签、容器、图片添加的上下内边距/外边距，消除多余高度
• 标签栏高度设置为70px，搭配容器80px的最小高度，满足左侧logo高度大于等于标签栏高度的要求
• 清理无效HTML标签，避免异常排版空隙

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