单行图片文字垂直居中问题——实战

使用表格的方法来表现设计效果

1. <style type="text/css">
2. <!--
3. body{
4.     font-size:12px;
5.     font-family:"宋体";
6. }
7. table{
8.     border:1px solid #E6EFF8;
9.     margin-bottom:2px;
10. }
11. td{
12.     height:23px;
13.     line-height:23px;
14.     padding:0 3px;
15. }
16. .name{
17.     font-weight:bold;
18. }
19. .money{
20.     font-size:18px;
21.     color:#FFA200;
22.     font-weight:bold;
23. }
24. .money strong{
25.     font-size:14px;
26. }
27. .renovate{
28.     color:#707070;
29. }
30. -->
31. </style>
32. <table width="380" cellspacing="0">
33.  <tr>
34.   <td width="80" class="name">遨游旅行网</td>
35.   <td width="157" class="renovate">最后更新：1小时以前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></td>
36.   <td width="56" class="money">368<strong>元</strong></td>
37.   <td width="77"><img src="images/btn/btn_speak_for.gif" alt="订票" width="61" height="17" /></td>
38.  </tr>
39. </table>

ie,ff显示效果

在表格中垂直显示是很容易实现的，但接下来用DIV的方法确不那么容易，因为在垂直居中问题DIV总是另人头疼的一个大问题

以下用DIV的方法模拟出上面表格的效果

1. <style type="text/css">
2. <!--
3. .simulate_table {
4. }
5. .simulate_table .row {
6.     width:378px;
7.     border:1px solid #E6EFF8;
8.     float:left;
9. }
10. .simulate_table .col1, .simulate_table .col2, .simulate_table .col3, .simulate_table .col4 {

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!