茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1498568 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
PI20101106_00016.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]只用 CSS 讓圖片在 DIV 中水平垂直都置中

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]只用 CSS 讓圖片在 DIV 中水平垂直都置中

2009-03-02 09:26 只用 CSS 讓圖片在 DIV 中水平垂直都置中

這個問題我很久以前思考過。水平置中當然沒問題, text-align : center 就好了。在 Firefox 和 Chrome 垂直置中也沒啥問題,因為 CSS 支援完整,可以動手腳的地方多。難的是在 IE 垂直置中。之前我想不到好的純 CSS 解法,所以最後我在 img onload 上註冊一個 handler ,動態算出 margin-top ,讓圖片垂直置中。

現在工作上又碰到這個問題,又開始苦思有沒有好的純 CSS 解法。結果在大陸找到這個網頁 - 圖片垂直居中的使用技巧。只能說太神了 m(__ __)m,這種解法我應該一輩子也想不出來吧。老實講我只約略知道為什麼可以這樣解,實際上的原理還是不太懂。

他的方式是抓出特定字型在 IE font-size 和所產生行高的比例,然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873 ,但我算出來約是 0.9 左右。所以要讓一張圖在 IE 高度 200px 的 DIV 中垂直置中就要把 font-family 設為 Arial 、 font-size 設為 200px * 0.9 = 180px 。

再來講講
大陸網頁的 Firefox 部份,他用 display : table-cell 讓圖片在 Firefox 垂直置中,我不太喜歡 :p ,因為這樣 DIV 就不能 float : left 或 float : right 了。所以我想辦法用 div:after 、 line-height 、 white-space : nowrap 兜出了一樣的效果。

下面是我整理出的在 IE 、 Firefox 、 Chrome 都可以跑的範例︰

Demo

HTML


<div><img src="demo.jpg" /></div>

CSS


div {
background-color : #EEE;
height : 200px;
width : 200px;
text-align : center;
/* Firefox, Chrome */
line-height : 200px;
white-space : nowrap;
/* IE */
*font-size : 180px; /* 200px * 0.8 = 180px */
*font-family : Arial;
}
div:after {
content : ".";
font-size : 1px;
margin-left : -1px;
opacity : 0;
}
div img {
vertical-align : middle;
}

 

下面是和 float : left 搭配的 Demo ︰

Firefox 和 Chrome 的部份額外補充兩點︰

  1. 如果你有設定 DOCTYPE ,且 DOCTYPE 是 Strict 模式,那其實 div:after 、 white-space : nowrap 都不用寫,把 line-height 和 DIV 高度設一樣就好了。
  2. div:after 不直接寫 font-size : 0 ,要寫 font-size : 1px 再寫 margin-left : -1px 和 opacity : 0 是因為 Chrome 不支援 font-size : 0 。

重新整理一份 Strict 模式用的 CSS 方便大家參考:


div {
background-color : #EEE;
height : 200px;
width : 200px;
text-align : center;
/* Firefox, Chrome */
line-height : 200px;
/* IE */
*font-size : 180px; /* 200px * 0.8 = 180px */
*font-family : Arial;
}


原文出處:只用 CSS 讓圖片在 DIV 中水平垂直都置中 @ Vexed's Blog :: 隨意窩 Xuite日誌
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]圖片垂直居中的使用技巧

图片垂直居中的使用技巧

在曾经的 淘宝UED 招聘 中有这样一道题目:

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

题目的难点在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:


.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:


原文出處:图片垂直居中的使用技巧 _ PlanABC – 怿飞’s Blog
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]水平與垂直置中


水平與垂直置中





此練習探討不同的置中方法。要將一段文字或一張圖片放在矩形格子(box)的中央,最簡單的方法是用
TABLE 元素,然後在
TD 元素 宣告 text-align:center。vertical-align:middle 為預設值,所以可以免宣告。
<textarea id='SPtable' style='display:none'>
<style type='text/css'>
.tbl td {width:350px;
         height:250px;
         border:solid 1px red;
        }
</style>
<table class=tbl>
<tr>
<td style='text-align:center'>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</td>
</table>
</textarea>
<script type='text/javascript'>dumpSample('SPtable')</script>


單行文字的置中。以下方法都不使用 TABLE 元素,而是要在
DIV 元素 置中。單行文字的置中,其水平置中可用 text-align:center。垂直置中可以將 line-height 宣告與 height 相同,此法只能用在單行文字的情形。
<textarea id='SPline' style='display:none'>
<style type='text/css'>
.out1   {width:160px;
         border:solid 1px red;
         height:100px;
        }
</style>
<div class=out1 style='text-align:center'>
<span>水平置中</span>
</div>
<div class=out1 style='line-height:100px'>
<span>垂直置中</span>
</div>
<div class=out1 style='text-align:center; line-height:100px'>
<span>中央</span>
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPline')</script>


區塊元素的置中。先要將子區塊元素設為 display:inline-block。水平置中可用 text-align:center。垂直置中可以將父元素 line-height 宣告與 height 相同,然後子區塊必須設成 vertical-align:middle;line-height:1em。為了在 IE6 達成垂直置中,還必須加上 margin:expression();此法使用
parentNode,
clientHeight 與數學函式
floor() 計算 margin。expression() 這行在個人電腦測試正常,可是移到部落格之後,會導致 IE6 停頓,所以用註解取消其功能;使用時請多測試。
<textarea id='SPblock' style='display:none'>
<style type='text/css'>
.blk   {width:200px;
        height:120px;
        border:solid 1px red;
        line-height:120px;
        text-align:center;
       }
.blk DIV {width:100px;
          background:blue;
          display:inline-block;
          vertical-align:middle;
          line-height:1em;
          /* margin:expression(Math.floor( (this.parentNode.clientHeight-this.clientHeight)/2 )+'px auto'); */
         }
</style>
<div class=blk>
<div>中央<br />中央</div>
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPblock')</script>


圖片的置中方法一。由於圖片是文字行元素,所以水平置中可以用 text-align:center。垂直置中的方法很多,下面使用的方法涵蓋了 IE6, Firefox, Safari, Chrome 等多種瀏覽器,參見
Centering (horizontally and vertically) an image in a box。這個方法的特點就是要在
IMG 元素 前加上文字行元素,例如
,內容留空;然後在風格表中宣告此元素是 height:100%; display:inline-block。
<textarea id='SPpiccenter' style='display:none'>
<style type='text/css'>
.out    {width:350px;
         height:250px;
         border:solid 1px red;
         font-size:0px;
        }
.out * {vertical-align:middle;}
.out I {height:100%;
        display:inline-block;
       }
</style>
水平置中
<div class=out style='text-align:center'>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
垂直置中
<div class=out>
<i></i>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
中央
<div class=out style='text-align:center'>
<i></i>
<img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpiccenter')</script>


圖片的置中方法二。水平置中使用 text-align:center。垂直置中將父元素的 line-height 設為 height,IMG 元素設為 vertical-align:middle;此法只能在 Firefox, Safari, Chrome 達成垂直置中;要在 IE6 達成垂直置中,還必須加上 margin:expression()。expression() 這行在個人電腦測試正常,可是移到部落格之後,會導致 IE6 停頓,所以用註解取消其功能;使用時請多測試。
<textarea id='SPpic3' style='display:none'>
<style type='text/css'>
.pic3  {width:350px;
        height:250px;
        border:solid 1px red;
        text-align:center;
        line-height:250px;
       }
.pic3 IMG {vertical-align:middle;
           /* margin:expression(Math.floor( (this.parentNode.clientHeight-this.clientHeight)/2 )+'px auto'); */
          }
</style>
中央
<div class=pic3>
<img id='im3' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic3')</script>


圖片的置中方法三。乾脆放在背景圖比較簡單。
<textarea id='SPpic4' style='display:none'>
<style type='text/css'>
.pic4  {width:350px;
        height:250px;
        border:solid 1px red;
       }
</style>
中央
<div class=pic4 style='background:no-repeat center center url(http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg)' >
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic4')</script>


使用 javascript 將元素置中。下面的範例在 IMG 元素加上
ONLOAD 啟動置中的函式 centerMe();此函式使用
parentNode,
clientHeight, clientWidth 與數學函式
floor() 計算 margin。如果使用者的瀏覽器沒有開啟 javascript,此法會失效;但是機率很小,應該可以忽略。
<textarea id='SPpic5' style='display:none'>
<script type='text/javascript'>
function centerMe(obj)
{
  obj.style.margin=Math.floor( (obj.parentNode.clientHeight-obj.clientHeight)/2 )+'px '
    + Math.floor( (obj.parentNode.clientWidth-obj.clientWidth)/2 )+'px';
}
</script>
<style type='text/css'>
.pic5  {width:350px;
        height:250px;
        border:solid 1px red;
       }
</style>
中央
<div class=pic5>
<img onload='centerMe(this)' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" />
</div>
</textarea>
<script type='text/javascript'>dumpSample('SPpic5')</script>


原文出處:螞蟻的 CSS: 水平與垂直置中
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|