Html 在CSS中旋转90度后对齐菜单项

我正在制作一个导航菜单，菜单项旋转-90度（参见屏幕截图）：

我在CSS中尝试了几种方法，但对齐方式仍然不正确。这是我试过的小提琴：

所使用的HTML：

<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>

我的问题是：如何根据屏幕截图对齐文本？i、 e.在

菜单项

DIV中居中对齐，如何仅在菜单文本下应用

背景色

，例如“菜单1”而不是

菜单项

本身？我希望

span

的大小与文本尺寸一致（即像内联元素一样自动调整大小），但可以应用背景色

提前谢谢。

好了（相应地更改样式）

html，正文{
身高：100%；
}
.菜单{
宽度：80px；
身高：100%；
边框：1px实心#00F；
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
溢出：隐藏；
}
.菜单项{
字体系列：Arial，无衬线；
字体大小：12px；
颜色：#FFF；
背景色：#F00；
位置：相对位置；
宽度：40px；
高度：200px；
边框：1px实心#0F0；
利润率：10px自动；
对齐项目：居中；
显示器：flex；
/*弯曲方向：立柱*/
空白：nowrap；
}
.菜单项范围{
变换：旋转（-90度）；
左边距：-3px；
}

菜单1
菜单2
菜单3
菜单4

就这样（相应地更改样式）

html，正文{
身高：100%；
}
.菜单{
宽度：80px；
身高：100%；
边框：1px实心#00F；
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
溢出：隐藏；
}
.菜单项{
字体系列：Arial，无衬线；
字体大小：12px；
颜色：#FFF；
背景色：#F00；
位置：相对位置；
宽度：40px；
高度：200px；
边框：1px实心#0F0；
利润率：10px自动；
对齐项目：居中；
显示器：flex；
/*弯曲方向：立柱*/
空白：nowrap；
}
.菜单项范围{
变换：旋转（-90度）；
左边距：-3px；
}

菜单1
菜单2
菜单3
菜单4

试试这个css：

html, body {
  height: 100%;
}
.menu {
  width: 100%;
  height: 80px;
  border: 1px solid #00F;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(-90deg);
  top: 465px;
  left: -450px;
}
.menu_item {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  background-color: #F00;
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid #0F0;
  margin: auto;
  flex: 1;
}
.menu_item span {
  display: inline-block;
  border: 1px solid #999;
  width: 100%;
  height: 80px;
  text-align: center;
}

试试这个css：

html, body {
  height: 100%;
}
.menu {
  width: 100%;
  height: 80px;
  border: 1px solid #00F;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(-90deg);
  top: 465px;
  left: -450px;
}
.menu_item {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  background-color: #F00;
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid #0F0;
  margin: auto;
  flex: 1;
}
.menu_item span {
  display: inline-block;
  border: 1px solid #999;
  width: 100%;
  height: 80px;
  text-align: center;
}

HTML代码：

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

使用以下JSFIDLE:

HTML代码：

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

---

使用这个jsidle:

related:如果你不旋转它会更容易。如果我旋转整个外部元素而不是其中的每个元素，我倾向于发现这类事情更容易。related:如果你不旋转它会更容易。如果我旋转整个外部元素，我倾向于发现这类事情更容易而不是其中的每个元素。欢迎使用堆栈溢出！在提问之前，请阅读和“”。欢迎使用堆栈溢出！提问前请先阅读和“”。