单行照片文本竖直垂直居中难题——实战演练

日期:2021-03-16 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站




应用报表的方式来主要表现设计方案实际效果
  1. <style type="text/css"> <!-- body{ font-size:12px; font-family:"宋体"; } table{ border:1px solid #E6EFF8; margin-bottom:2px; } td{ height:23px; line-height:23px; padding:0 3px; } .name{ font-weight:bold; } .money{ font-size:18px; color:#FFA200; font-weight:bold; } .money strong{ font-size:14px; } .renovate{ color:#707070; } --> </style> <tablewidth="380" cellspacing="0"> <tr> <tdwidth="80" class="name">畅游旅游网</td> <tdwidth="157" class="renovate">最终升级:1小时之前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></td> <tdwidth="56" class="money">368<strong></strong></td> <tdwidth="77"><img src="images/btn/btn_speak_for.gif" alt="订票" width="61" height="17" /></td> </tr> </table>

ie,ff显示信息实际效果

在报表中竖直显示信息是很非常容易完成的,但接下来用DIV的方式确不那末非常容易,由于在竖直垂直居中难题DIV一直另人头疼的1个大难题
下列用DIV的方式仿真模拟出上面报表的实际效果
  1. <style type="text/css"> <!-- .simulate_table { } .simulate_table .row { width:378px; border:1px solid #E6EFF8; float:left; } .simulate_table .col1, .simulate_table .col2, .simulate_table .col3, .simulate_table .col4 { float:left; width:78px; padding-left:3px; line-height:23px; height:23px; } .simulate_table .col2 { width:152px; } .simulate_table .col2 img{ } .simulate_table .col3 { width:60px; } .simulate_table .col4 { width:77px; padding-left:0; } --> </style> <divclass="simulate_table"> <div class="row"> <divclass="col1"><span class="name">畅游旅游网</span></div> <divclass="col2"><span class="renovate">最终升级:1小时之前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></span></div> <divclass="col3"><span class="money">368<strong></strong></span></div> <divclass="col4"><img src="images/btn/btn_speak_for.gif" alt="订票" width="61" height="17" /> &nbsp;</div> </div> </div>

ff,ie7显示信息实际效果

ie6显示信息实际效果

剖析:从实际效果图中可看出FF在竖直方位上适用也并不是很完善,在1行中假如只是文本,只必须写入等价的行高、高宽比它就会竖直垂直居中,第2种状况文本与图另外存在,也是一样垂直居中(照片总底部在文本的基准线上,能够试着把照片高宽比增大,你会看得实际效果更显著1些),IE6会所有图文居上部。第3种状况是仅有照片,FF,IE6都会居顶部。
IE7上面沒有去剖析是由于IE7和FF主要表现实际效果同样
那末怎样处理这类访问器不相适配的难题呢,能够运用《单行照片文本竖直垂直居中难题》1文中的思路去处理难题。从图中大家去细心查询这个设计方案的特性,在做设计方案图复原网页页面时我1般全是看图上的特点,从上面设计方案图中能够看出第1列与第3列是仅有文本的,因此只需写款式高、行高便可以处理这多列的竖直垂直居中,第2列能够为IE6独立写1个款式,为这里的照片写上边距(或上补白),或写这个列DIV的上补白。第4列IE,FF是竖直居顶,那末就为她们写入上补白,或给照片写入上距或补白。
也有1种方式便是各自为每列写入上补白,这也是1种思路。
以上是依据设计方案的特性写入款式,出示1种制做思路,期待能够对您有一定的启迪,而非全能的规范。
  1. .simulate_table .row { width:378px; border:1pxsolid #E6EFF8; float:left; } .simulate_table.col1, .simulate_table .col2, .simulate_table .col3, .simulate_table .col4 { float:left; width:78px; padding-left:3px; } .simulate_table.col1, .simulate_table .col2, .simulate_table .col3{ line-height:23px; height:23px; } .simulate_table.col2 { width:152px; } .simulate_table.col3 { width:60px; } .simulate_table.col4 { width:77px; padding-left:0; padding-top:3px; }

阿华2007年12月08日于家里