span标签设置文字水平居中与垂直居中
1、span文字水平居中
<span style="background-image:url(../images/sozhe_discount_018.gif);width:62px;height:18px;position:absolute;" class="font-white">abc</span>
2、文字居中
style= "text-align:center；line-height:18px; "
水平居中text-align:center；
设置行高line-height:18px; 同span高度一样，那么文字就可以垂直居中了（仅限一行文本）。
3、span标签设置居中
span{display:block;margin:0 auto;width:500px;border:1px solid red;}
4、span多行文字的垂直水平居中
让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em;
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。
用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
外部div标签：
{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
内部span标签：
{display:inline-block;vertical-align:middle;font-size:0.1em; }
例子：
复制代码 代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行文字垂直水平居中</title>
<mce:style><!--
.align_box_2{
display:table-cell;
width:550px;
height:18px;
border:4px solid #beceeb;
color:#069;
vertical-align:middle;
font-size:160px;}
.align_box_2 span.align_word{
display:inline-block;
vertical-align:middle;
font-size:12px; }
--></mce:style><style mce_bogus="1"> .align_box_2{
display:table-cell;
width:550px;
height:18px;
border:4px solid #beceeb;
color:#069;
vertical-align:middle;
font-size:160px;}
.align_box_2 span.zxx_align_word{
display:inline-block;
vertical-align:middle;
font-size:12px; }</style>
</head>
<body>
<div class="align_box_2">
<span class="align_word"><a href="">这里的文字用来做多行文字垂直居中对齐的测直居中。</a></span>
</div>
</body>
</html>
注意的问题：
1. 外部div 如果是在其它元素，如li 时，必须清除所有的浮动。
2. 必须设置font-size，否则在ie6下不生效。
附：css的em、px、pt长度单位转换
在IE6.0字体设定为中时，如果字体未做任何CSS设定或者<font size>元素的设定，默认的字体是12pt，或者16px，或者1em，或者font size=3。em、px、pt的换算关系如下：
参考：
1em=16px
1em=12pt
1px=1/16 em=0.0625em
1px=3/4 pt=0.75pt
1pt=1/12 em≈0.0833em
1pt=4/3 px≈1.3333px
