简单css实现图片和文字的居中显示，IE下有效

简单css代码实现图片和文字的居中显示，IE下有效。

CSS代码：

1. .listbox ul {
2.     margin: 0 2px 10px;
3. }
5. .listbox li {
6.     width: 145px;
7.     height: 170px;
8.     overflow: hidden;
9.     margin: 10px 7px 0;
10.     float: left;
11.     border: 1px outset #EEE;
12.     background: #FFF;
13.         
14.   text-align:center; 
15.   position:relative; 
16.   display:table-cell; 
17.   vertical-align:middle;    
18.     }
20. .listbox li p { 
21.   *position:absolute; 
22.   top:50%; 
23.   left:50%; 
24. } 
26. .listbox li p img { 
27.     *position:relative;
28.     border:0; 
29.     top:-50%; 
30.     left:-50%; 
31. }
33. .listbox a:hover img {
34.     border: 2px solid #6F6F37;
35.     }
37.     
38. /* 产品图片下的说明文字：sth to display */
39. .intro {
40.     position:relative; 
41.     top:130px;
42.         
43.     display: block;         
44.     width: 130px;
45.     height: 20px;
46.     line-height: 20px;
47.     }

调用：

1. <div class="listbox">
2.     <ul>
3.         <li>
4.             <p><a href="#"><img src="1.jpg" border="1"/></a></p>
5.             <br/>
6.             <span class="intro"><a href="#">pic1</a></span>
7.         </li>
8.         <li>
9.             <p><a href="#"><img src="2.jpg" border="1"/></a></p>
10.             <br/>
11.             <span class="intro"><a href="#">pic2</a></span>
12.         </li>               
13.     </ul>
14. </div>