這個方式應該是比較少見到有人使用的了,這個想法是被老友 Paul 所激發的,writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上關係,它的用途是改變文字書寫的方向從橫書變直書,且支援度從很早期的IE5就有支援了,但當時Amos鮮少使用,一來是網頁多是橫書居多,另外當時除了IE瀏覽器以外,其他瀏覽器的支援度似乎都不太好,也就很少使用了。
writing-mode 本身是設定文字書寫的方向,既然文章書寫方向可以設定直書,那麼就表示我們可以利用直書方式搭配 text-align: center 來讓文字垂直置中囉?! 有了這個想法支後,當然就是馬上試做啦!
Amos 利用 writing-mode 將一整個文字容器也就是 div 區塊變成直書,接著此容器設定 text-align: center 來讓子層達到垂直置中的目的,白話一點的解說的話,就是你把原本橫排的文字,變成直排了,所以原本橫排用到的水平對齊中間(text-align: center),就變成了控制直排的中間了(垂直置中),原理就是這麼簡單。但要特別注意的是瀏覽器對此語法的支援來說,需要拆開寫法才行,不然某些瀏覽器吃的語法不同,可能會讓你的網頁在某些瀏覽器上看起來無效,這會是最需要注意到的。而有些人可能會發現到各瀏覽器好像有些正常有些不正常,這是由於瀏覽器的語法有新舊兩種寫法,所以如果各位須要讓各個瀏覽器都支援的話,那麼請自行去查一下囉(Amos好壞)。
<div class="box box23">
<div class="content">
<div class="txt">
立馬來看 Amos 實際完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相簿效果
</a>
效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
這個置中的想法來自於 Paul
</div>
</div>
</div>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
writing-mode: tb-lr; /* for ie11 */
writing-mode: vertical-lr;
text-align: center;
margin:0 auto;
}
.content{
width: 400px;
background: #ccc;
display: inline-block; /* for ie & edge */
width: 100%;
writing-mode: lr-tb;
margin: auto;
text-align: left;
}
.box .txt{
width: 80%;
margin: auto;
}
Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位