單行圖片文字垂直居中問題——實戰(zhàn)_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
使用表格的方法來表現(xiàn)設計效果
- <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>
- <table width="380" cellspacing="0">
- <tr>
- <td width="80" class="name">遨游旅行網(wǎng)</td>
- <td width="157" class="renovate">最后更新:1小時以前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></td>
- <td width="56" class="money">368<strong>元</strong></td>
- <td width="77"><img src="images/btn/btn_speak_for.gif" alt="訂票" width="61" height="17" /></td>
- </tr>
- </table>
ie,ff顯示效果
在表格中垂直顯示是很輕易實現(xiàn)的,但接下來用DIV的方法確不那么輕易,因為在垂直居中問題DIV總是另人頭疼的一個大問題
以下用DIV的方法模擬出上面表格的效果
- <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>
- <div class="simulate_table">
- <div class="row">
- <div class="col1"><span class="name">遨游旅行網(wǎng)</span></div>
- <div class="col2"><span class="renovate">最后更新:1小時以前 <img src="images/ico/ico_time_bak.gif" alt="time" width="12" height="12" /></span></div>
- <div class="col3"><span class="money">368<strong>元</strong></span></div>
- <div class="col4"><img src="images/btn/btn_speak_for.gif" alt="訂票" width="61" height="17" /> </div>
- </div>
- </div>
ff,ie7顯示效果
ie6顯示效果
分析:從效果圖中可看出FF在垂直方向上支持也不是很完美,在一行中假如只是文字,只需要寫入等值的行高、高度它就會垂直居中,第二種情況文字與圖同時存在,也是同樣居中(圖片總底部在文字的基線上,可以試著把圖片高度增大,你會看得效果更明顯一些),IE6會全部圖文居上部。第三種情況是只有圖片,F(xiàn)F,IE6都會居頂部。
IE7上面沒有去分析是因為IE7和FF表現(xiàn)效果相同
那么如何解決這種瀏覽器不相兼容的問題呢,可以利用《單行圖片文字垂直居中問題》一文中的思路去解決問題。從圖中我們去仔細查看這個設計的特點,在做設計圖還原頁面時我一般都是看圖上的特征,從上面設計圖中可以看出第一列與第三列是只有文字的,所以只需寫樣式高、行高就可以解決這兩列的垂直居中,第二列可以為IE6單獨寫一個樣式,為這里的圖片寫上邊距(或上補白),或者寫這個列DIV的上補白。第四列IE,FF是垂直居頂,那么就為他們寫入上補白,或給圖片寫入上距或補白。
還有一種方法就是分別為每列寫入上補白,這也是一種思路。
以上是根據(jù)設計的特點寫入樣式,提供一種制作思路,希望可以對您有所啟發(fā),而非萬能的標準。
- .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;
- }
- .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日于家中
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-單行圖片文字垂直居中問題——實戰(zhàn)。