フレキシボックス - 水平、垂直テキストを揃える

Question

だから私は、これらの要素を保持するためにフレキシボックスを使用しています：

をそれはそのようなものになります。あなたが知ることができますが、私はテキストを水平に配置するのが難しいです。

テキストを垂直に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

translateX()の除去、中央にH2にtransform-originを変更してみてください、と親.selectionsにdisplay: flex; justify-content: center;を追加します。コードを使用すると、画像に表示されて何を複製していません

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