CSS中-90度旋转后导航菜单项的对齐与样式优化问题

我来帮你搞定这两个问题，咱们直接通过代码调整来实现需求：

核心思路拆解 #

• 文本居中：用Flex布局实现容器内元素的自动居中，避免手动调整定位的繁琐
• 自适应背景色：修改span的显示模式，让它贴合文本尺寸，同时把背景色从父容器转移到span上

完整调整后的代码 #

<div class="menu">
  <div class="menu_item">
    <span>MENU 1</span>
  </div>
  <div class="menu_item">
    <span>MENU 2</span>
  </div>
  <div class="menu_item">
    <span>MENU 3</span>
  </div>
  <div class="menu_item">
    <span>MENU 4</span>
  </div>
</div>

html, body { height: 100%; }
.menu { 
  width: 80px; 
  height: 100%; 
  border: 1px solid #00F; 
  position: relative; 
}
.menu_item { 
  font-family: Arial, sans-serif; 
  font-size: 12px; 
  color: #FFF; 
  background-color: transparent; /* 移除父容器背景色，留给span单独设置 */
  position: relative; 
  width: 40px; 
  height: 200px; 
  border: 1px solid #0F0; 
  margin: auto;
  /* 用Flex实现内部元素水平+垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu_item span { 
  display: inline-block; /* 让span自适应文本宽度 */
  background-color: #F00; /* 仅给文本区域设置背景色 */
  padding: 3px 8px; /* 可选：增加内边距优化视觉效果 */
  transform: rotate(-90deg);
  transform-origin: center center; /* 确保旋转基点为元素中心，避免偏移 */
}

关键修改说明 #

1. 居中对齐实现：给.menu_item添加Flex布局属性后，内部的span会自动在水平和垂直方向居中，即使旋转后也能稳定保持在容器中心位置。
2. 自适应背景色实现：将span的display改为inline-block并去掉固定宽高，让它完全贴合文本内容；同时把背景色从.menu_item转移到span上，实现仅文本区域有背景的效果。
3. 可选的padding属性可以让背景色区域和文本之间保留一定间距，视觉上更舒适。

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