新闻 手机 家电 数码 电脑 财经 大模型 直播

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

  • 来源： 网页教学网 作者： 李祥敬   2008-12-02/16:16


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

    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 {
    11.     float:left;
    12.     width:78px;
    13.     padding-left:3px;
    14.     line-height:23px;
    15.     height:23px;
    16. }
    17. .simulate_table .col2 {
    18.     width:152px;
    19. }
    20. .simulate_table .col2 img{
    21.    
    22. }
    23. .simulate_table .col3 {
    24.     width:60px;
    25. }
    26. .simulate_table .col4 {
    27.     width:77px;
    28.     padding-left:0;
    29. }
    30. -->
    31. </style>
    32. <div class="simulate_table">
    33.  <div class="row">
    34.   <div class="col1"><span class="name">遨游旅行网</span></div>
    35.   <div class="col2"><span class="renovate">最后更新：1小时以前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></span></div>
    36.   <div class="col3"><span class="money">368<strong>元</strong></span></div>
    37.   <div class="col4"><img src="images/btn/btn_speak_for.gif" alt="订票" width="61" height="17" /> &nbsp;</div>
    38.  </div>
    39. </div>

    ff,ie7显示效果

    ie6显示效果

    分析：从效果图中可看出FF在垂直方向上支持也不是很完美，在一行中如果只是文字，只需要写入等值的行高、高度它就会垂直居中，第二种情况文字与图同时存在，也是同样居中（图片总底部在文字的基线上，可以试着把图片高度增大，你会看得效果更明显一些），IE6会全部图文居上部。第三种情况是只有图片，FF，IE6都会居顶部。

    IE7上面没有去分析是因为IE7和FF表现效果相同

    那么如何解决这种浏览器不相兼容的问题呢，可以利用《单行图片文字垂直居中问题》一文中的思路去解决问题。从图中我们去仔细查看这个设计的特点，在做设计图还原页面时我一般都是看图上的特征，从上面设计图中可以看出第一列与第三列是只有文字的，所以只需写样式高、行高就可以解决这两列的垂直居中，第二列可以为IE6单独写一个样式，为这里的图片写上边距（或上补白），或者写这个列DIV的上补白。第四列IE,FF是垂直居顶，那么就为他们写入上补白,或给图片写入上距或补白。

    还有一种方法就是分别为每列写入上补白，这也是一种思路。

    以上是根据设计的特点写入样式，提供一种制作思路，希望可以对您有所启发，而非万能的标准。

    1. .simulate_table .row {
    2.     width:378px;
    3.     border:1px solid #E6EFF8;
    4.     float:left;
    5. }
    6. .simulate_table .col1, .simulate_table .col2, .simulate_table .col3, .simulate_table .col4 {
    7.     float:left;
    8.     width:78px;
    9.     padding-left:3px;
    10. }
    11. .simulate_table .col1, .simulate_table .col2, .simulate_table .col3{
    12.     line-height:23px;
    13.     height:23px;
    14. }
    15. .simulate_table .col2 {
    16.     width:152px;
    17. }
    18. .simulate_table .col3 {
    19.     width:60px;
    20. }
    21. .simulate_table .col4 {
    22.     width:77px;
    23.     padding-left:0;
    24.     padding-top:3px;
    25. }

    阿华2007年12月08日于家中


    评论 {{userinfo.comments}}

    查看全部评论
    {{money}}元

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    『2024鸥维数据中国大学排名』百强榜正式发布
    标签： 鸥维数据 大数据 高考 大学 榜单 2024-05-23
    『2024鸥维数据中国大学排名』百强榜正式发布

    追觅科技多项全球首创技术获沙利文权威认证 引领智能清洁行业未来
    标签： 追觅科技 2024-05-23

    百万级网红“王红权星”因违规行为遭社交平台封禁
    标签： 王红权星 2024-05-22
    百万级网红“王红权星”因违规行为遭社交平台封禁

    苹果WWDC 2024前瞻：iOS 18和macOS 15携AI创新功能登场！
    标签： WWDC 2024 iOS 18 2024-05-22
    苹果WWDC 2024前瞻：iOS 18和macOS 15携AI创新功能登场！

    华为余承东：不善言辞的领导者如何引领创新与变革
    标签： 余承东 2024-05-21
    华为余承东：不善言辞的领导者如何引领创新与变革

    驱动号 更多

    联系电话：010-62681584

    电子邮箱：sw@qudong.com

    地址：北京市海淀区学院路30号

    驱动中国官方微信

    驱动中国官方微信

    ©驱动中国 Qudong.com  All Rights Reserved 版权所有 复制必究 京ICP备11013097号广播电视节目许可证：（京）字第07618号