CSS中如何把Span標籤等行內元素設置爲固定寬度及div中內容垂直居中

一、行內元素設置固定寬度

1. 形如<span>ABC</span>獨立行設置SPAN爲固定寬度方法如下：span {width:60px; text-align:center; display:block; }

實際驗證結果：IE6 OK， FIREFOX 3 OK。一、形如<span>ABC</span>DEF格式行設置SPAN爲固定寬度的方法如下：
span {width:60px; text-align:center; display:block; float:left;}
實際驗證結果：IE6 OK， FIREFOX 3 OK。
2. 形如ABC<span>DEF</span>GH格式行設置SPAN爲固定寬度的方法如下：span {width:60px; text-align:center; display:inline-block;}
實際驗證結果：IE6 OK， FIREFOX 3 OK。
提示： 完美兼容就是把display屬性設爲inline-block，同時也可兼容前兩種情況。
block，inline，inline-block的區別：
display:block;——類似與DIV標籤的寬高邊距等屬性均可定製的元素特性；
display:inline;——類似與<a>、<strong>標籤的寬高等屬性不可定製的元素特性；
display:inline-block;——“全”可定製屬性的元素特性；
補充：1、如何讓<li>AAA<span>BBB</span></li>裏頭的BBB靠右對齊且不換行？
答：如果對span使用float屬性，總是導致span換到下一行。

可以採用下面方法實現同行且居右對齊。li { position:relative;}li span{ position:absolute;right:0px;}即可實現。

二、設置div中內容垂直居中

    height:45px;
    line-height:45px;
    overflow:hidden;