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;添加到父.selections。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;