Flexbox的 - 水平取向垂直文本

所以我使用的是Flexbox将持有这些元素：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>

来源

2017-02-04 Setsuna F. Seiei

代码不复制什么，你在图片中看到。请使用您迄今为止的内容创建一个[最小，完整，可验证的示例]（http://stackoverflow.com/help/mcve）。 http://codepen.io/anon/pen/bgMyag –

噢。 http://codepen.io/aphsai/pen/mRLYXe 这应该可能工作？但颜色没有显示出来...... –

尝试在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>

来源

2017-02-04 05:15:52

这工作出色。谢谢！ –

@ SetsunaF.Seiei甜美，没问题。 –

好工作Michael – Brad

Flexbox的 - 水平取向垂直文本

回答

相关问题