Flexbox - 水平对齐垂直文本答案

【问题标题】：Flexbox - Horizontally aligning vertical textFlexbox - 水平对齐垂直文本
【发布时间】：2017-06-21 13:12:47
【问题描述】：

所以我使用 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>

【问题讨论】：

该代码不会复制您在图片中看到的内容。请使用您目前拥有的内容创建一个minimal, complete, verifiable example。 codepen.io/anon/pen/bgMyag
哦，呃。 codepen.io/aphsai/pen/mRLYXe 这应该可行吗？但是颜色没有出现......

标签： html css sass flexbox

【解决方案1】：

尝试将 h2 上的 transform-origin 更改为居中，删除 translateX()，并将 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>

【讨论】：

@SetsunaF.Siei 甜，没问题。