所以我使用的是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>
代碼不復制什麼,你在圖片中看到。請使用您迄今爲止的內容創建一個[最小,完整,可驗證的示例](http://stackoverflow.com/help/mcve)。 http://codepen.io/anon/pen/bgMyag –
噢。 http://codepen.io/aphsai/pen/mRLYXe 這應該可能工作?但顏色沒有顯示出來...... –