CSS3實現(xiàn)文本垂直排列的方法
發(fā)布時間：2018-07-10 16:44:33 作者：逆旅wy 
我要評論
我要評論這篇文章主要介紹了CSS3實現(xiàn)文本垂直排列的方法，也就是運用了CSS的writing-mode屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近的一個項目中要使文字垂直排列，也就是運用了CSS的writing-mode屬性。
writing-mode最初時ie中支持的一個屬性，后來在CSS3中增添了這一新的屬性，所以在ie中和其他瀏覽器中的語法會有區(qū)別。
1.0 CSS3標(biāo)準(zhǔn)
writing-mode:horizontal-tb;//默認：水平方向，從上到下 writing-mode:vertical-rl; //垂直方向，從右向左 writing-mode:vertical-lr; //垂直方向，從左向右
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文字垂直排列</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
}
.vertical-text{
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-text">
1. 文字垂直排列 <br />
2. 文字垂直排列
</div>
</body>
</html>
2.0 IE中
由于歷史的原因，IE下該屬性值則顯得尤為復(fù)雜：
-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb
具體可以查看官方文檔：
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/
3.0 一些應(yīng)用
3.1 垂直居中
通過對這個屬性的使用，我們可以結(jié)合 text-align:center 實現(xiàn)垂直居中或者使用margin: auto。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 圖片垂直居中</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
height: 500px;
}
.vertical-img{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-img">
<img src="1.jpg"/>
</div>
</body>
</html>
3.2 文字下沉效果
我們可以設(shè)置文字的writing-mode，然后在結(jié)合text-indent來實現(xiàn)文字點擊時的下沉效果；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字下沉效果</title>
<style type="text/css">
.btn{
width: 50px;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
font-size: 16px;;
display: inline-block;
border-radius: 50%;
background: gray;
cursor: pointer;
}
.btn:active{
text-indent: 2px;
}
.vertical-text{
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
*writing-mode: tb-rl;
}
</style>
</head>
<body>
<span>點擊領(lǐng)紅包</span>
<p class="vertical-text btn">開 </p>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解CSS行高line-height與文本垂直居中的原理
本文詳細介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一2016-08-12- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下2016-07-04
- 所創(chuàng)建的HTML元素基本上都認為是水平的框架，有時候我們確實想以垂直方式顯示文本元素，下面演示下如何輕松做到這一點2014-03-24
- 當(dāng)定義了 Text 的 height 屬性時，在 Text 中輸入的文字都不是垂直居中的，不過可以通過css來控制它，下面有個不錯的示例，大家可以參考下2014-02-18
- 單行文本居中比較簡單，就是將line-height設(shè)置成和height一樣就可以了，對于多行文本，這種方式就行不通了，使用width，height必須使用px單位，再配合vertial-align:middle2013-12-09
用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的
一直以來,在HTML中,img input select button 這里元素，垂直對齊,比較難。結(jié)果我長大了。我發(fā)現(xiàn)了一個現(xiàn)像，其實解決這些問題只是一句話的事。2011-03-08