一、原始使用writing-mode属性-不推荐
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。
二、使用CSS模拟文字竖排
对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>竖列排版实例 </title>
<style>
body{text-align:center}
.shuli{ margin:0 autowidth:20pxline-height:24pxborder:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>
说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。
三、使用br换行让其文字垂直竖排显示
利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>竖列排版实例</title>
<style>
body{text-align:center line-height:22px}
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */
</style>
</head>
<body>
我<br>是<br>竖<br>列<br>排<br>版
</body>
</html>
1.首先，打开HTML编辑器并创建一个新的HTML文件，比如index。说明:html，用于填写代码的基本层次的问题。-
2.在index.html中的<style>标签中，将“.shoucang .sc_ul li”中的“height: 73px”调整为：height: 73pxpadding-top: 7px。
3.最后，浏览器运行index.html页面，发现li标记中的文本垂直和水平居中。
扩展资料：
其他代码：
Thecodeisasfollows：
<style type = "text/CSS" >
．Shoucang｛
Width：58px；
Height：300px；
Float：correct；
Background－color：＃CCC；
Border：1pxentity＃999；
｝
．Shoucang．Sc＿ul｛
Width：21px；
Margin－right：car；
Margin－left：car；
Thelist－style－type：no；
Padding－top：20px；
Padding－right：0px；
Padding－bottom：0px；
Padding－left：0px；
Margin－top：0px；
Margin－bottom：0px；
｝
．Shoucang．Sc＿ulli｛
Thetext－align：center；
Vertical－align：intermediate；
Height：80px；
Width：21px；
Margin－bottom：9px；
Color：＃FFF．
Textmodification：no；
Thetext－align：center；
Vertical－align：intermediate；
Background－color：＃FF0000；
Fontsize：12px；
Border：1pxentity＃666；
｝
-->
></ style
</ a >
The <body >
<div class = "shoucang" >
<ul class = "sc_ul" ><li >set as home </ li ><li >lee </ >
<li class = "no" >contact way lee </ a >
</ ul >
<style>
.tongpian6 {
height: 50px
padding-left: 20px
vertical-align: middle
}
</style>
<table border="1">
<tr>
<td class="tongpian6">hehehe</td>
</tr>
</table>
因为：
1、表格内左边距使用padding-left，而不是margin-left。margin-left叫外左边距。
2、单元格垂直居中，设定vertical-align为middle，而不是bottom（靠下）。
扩展资料：css文本和div垂直居中方法总结
对文本，只需要对其父级元素设置text-align: center，而对div等块级元素，只需要设置其left和right的margin值为auto。
要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
1、单行文本垂直居中
对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：
<!--html代码-->
<div id="div1">
这是单行文本垂直居中
</div>
/*css代码*/
#div1{
width: 300px
height: 100px
margin: 50px auto
border: 1px solid red
line-height: 100px/*设置line-height与父级元素的height相等*/
text-align: center/*设置文本水平居中*/
overflow: hidden/*防止内容超出容器或者产生自动换行*/
2、子div垂直居中
<!--html代码-->
<div id="outer">
<div id="middle">
子div(固定大小)垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4
width: 300px
height: 200px
position: relative
}
#middle{
background-color: #E41627
width: 100px
height: 100px
margin: auto
position: absolute
left: 50%
top: 50%
margin-left: -50px
margin-top: -50px
}
