Flexbox-水平对齐垂直文本

Question

所以我正在使用一个flexbox来容纳这些元素：

看起来像那样。 虽然您可以说，但我在水平居中对齐文本时遇到困难。

我将文本垂直旋转90度，变换原点在左侧。

.containers {
  width:100%;
  height:100%;
  display:flex; 
}
.selections {
  width:100/6 *100%;
  height:100%;
  padding:0;
  margin:0;
  line-height: 100%;
  filter:brightness(60%) grayscale(30%);
  transition: .3s filter ease-in-out;
  color:#DDD;
  h2 {
    position:absolute;
    margin:0 auto;
    top:50%;
    transform: rotate(90deg) translateX(-50%);
    transform-origin: left;
  }
}

我可能应该包括HTML。

<div class="containers">
<div class="selections one"> <h2> BOWL </h2> </div>
<div class="selections two"> <h2> GOBLET </h2> </div>
<div class="selections three"> <h2> GUPPY BOX </h2> </div>
<div class="selections four"> <h2> LAMP </h2> </div>
<div class="selections five"> <h2> LAMINATED BOWL </h2> </div>
<div class="selections six"> <h2> OVENSTICK  </h2> </div>
<div class="selections seven"> <h2> WALRUS TOY </h2> </div>
<div class="selections eight"> <h2> WHISTLE </h2> </div>
</div>

Answer 1

尝试将h2上的transform-origin更改为居中，删除translateX() ，并添加display: flex; justify-content: center; display: flex; justify-content: center; 到父.selections 。

 .containers { width: 100%; height: 100%; display: flex; } .selections { width: 16.66667%; border: 1px solid #000; height: 100%; padding: 0; margin: 0; line-height: 100%; filter: brightness(60%) grayscale(30%); transition: .3s filter ease-in-out; color: #DDD; display: flex; justify-content: center; } .selections h2 { position: absolute; margin: 0 auto; top: 50%; transform: rotate(90deg); transform-origin: center; } .one { background-color: #aa0000; } .one:hover { filter: brightness(90%) grayscale(10%); } .two { background-color: #b21900; } .two:hover { filter: brightness(90%) grayscale(10%); } .three { background-color: #bd3d00; } .three:hover { filter: brightness(90%) grayscale(10%); } .four { background-color: #cb6600; } .four:hover { filter: brightness(90%) grayscale(10%); } .five { background-color: #da9300; } .five:hover { filter: brightness(90%) grayscale(10%); } .six { background-color: #e7bd00; } .six:hover { filter: brightness(90%) grayscale(10%); } .seven { background-color: #f2e200; } .seven:hover { filter: brightness(90%) grayscale(10%); } .eight { background-color: #fbfd00; } .eight:hover { filter: brightness(90%) grayscale(10%); } 

 <div class="containers"> <div class="selections one"> <h2> BOWL </h2> </div> <div class="selections two"> <h2> GOBLET </h2> </div> <div class="selections three"> <h2> GUPPY BOX </h2> </div> <div class="selections four"> <h2> LAMP </h2> </div> <div class="selections five"> <h2> LAMINATED BOWL </h2> </div> <div class="selections six"> <h2> OVENSTICK </h2> </div> <div class="selections seven"> <h2> WALRUS TOY </h2> </div> <div class="selections eight"> <h2> WHISTLE </h2> </div> </div>