Setsuna F. Seiei Setsuna F. Seiei - 4 years ago 135
Sass (Sass) Question

Flexbox - Horizontally aligning vertical text

So I'm using a flexbox to hold these elements:

enter image description here

It looks something like that. Though as you can tell, I'm having difficulty in horizontally centering the text.

I'm rotating the text vertically 90 degrees and the transform origin is to the left.

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


I should probably include the 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 Source

Try changing transform-origin on the h2 to center, removing the translateX(), and add display: flex; justify-content: center; to the parent .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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download