按钮间垂直分隔线未居中及Logout按钮对齐修复请求（需响应式）

原问题：头部按钮间的垂直分隔线向上偏移，未在按钮间居中；Logout按钮未与其他按钮对齐，需修复并保证响应式设计。

修复后的HTML代码 #

<div class='tabs'>
  <button mat-button>
    <span class='name'>A</span>
  </button>
  <mat-divider [vertical]="true"></mat-divider>

  <button mat-button>
    <span class='name'>B</span>
  </button>
  <mat-divider [vertical]="true"></mat-divider>

  <button mat-button>
    <span class='name'>C</span>
  </button>
  <mat-divider [vertical]="true"></mat-divider>

  <button mat-flat-button class='density'>
    <span class='material-icons' style='transform: rotate(180deg)'>logout</span>
    <div class='name-logout'>Logout</div>
  </button>
</div>

修复后的CSS代码 #

.tabs {
  display: flex;
  align-items: center; /* 核心：让所有子元素垂直居中 */
  font-family: Roboto, sans-serif;
  gap: 16px; /* 用gap统一控制元素间距，替代零散margin */
  flex-wrap: wrap; /* 响应式：空间不足时自动换行 */
}

.tabs button {
  border: none;
  background: transparent;
  align-items: center;
  cursor: pointer;
  display: inline-flex; /* 确保按钮内部元素对齐 */
  gap: 4px; /* 按钮内图标与文字的间距 */
}

.tabs .name {
  color: white;
  font-size: 14px;
  line-height: normal;
}

.tabs .material-icons {
  background-color: white;
  color: #006AF5;
}

.tabs .name-logout {
  background-color: white;
  font-family: Roboto, sans-serif;
  line-height: normal;
  text-size-adjust: auto;
  color: #006AF5;
}

.tabs .mat-divider-vertical {
  height: 18px; /* 设置合适的分隔线高度，视觉上居中 */
  width: 1px !important; /* 修正分隔线宽度，原0px无法显示 */
  background-color: white;
  margin: 0; /* 移除多余margin，用容器gap控制间距 */
  position: static !important; /* 重置定位，避免偏移 */
}

关键修复说明 #

• 给.tabs添加align-items: center，确保所有按钮和分隔线垂直居中对齐，直接解决分隔线偏移和Logout按钮错位问题。
• 用容器的gap属性统一控制元素间距，替代内联margin，布局更整洁且适配响应式需求。
• 调整垂直分隔线的高度和宽度，移除内联样式，通过CSS统一控制，保证分隔线在按钮间视觉居中。
• 给按钮添加display: inline-flex，确保按钮内部图标与文字对齐，同时flex-wrap: wrap实现空间不足时自动换行，满足响应式设计要求。

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