寬屏圖片居中的兩種方法

現在有些網站比較流行用100%寬度的圖片（div）佔滿屏幕，來營造出比較整體或是大氣的感覺。如果直接放一張大圖進去並禁止縮放，會發現瀏覽器是從圖片左側開始展示圖片，而我們想要的是主要顯示中間重要部分。有兩種方法可以做到，一種是利用CSS的背景居中，另一種是用js調整圖片的位置。Talking is cheap, here comes the code:

<style>
.wideBanner {background: rgba(0, 0, 0, 0) url("../images/bg.jpg") no-repeat scroll center center;height: 19px;}
</style>
<div id="wideBanner"></div>

<script type="text/javascript"> 
    $(document).ready(function(){
        var offset=($(window).width()-$("#wideBanner").css("width"))/2;
        $("#wideBanner").css("left",offset);
});
</script>
<div id="wideBanner"></div>

---

未知寬度div居中https://github.com/simaQ/cssfun/issues/3

     .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
     .center{display:inline-block;border:2px solid #fff;}
     .center{_display:inline;} /*针对ie6 hack*/
     .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}

     <div class="container">
     <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
     <div style="clear:both"></div></div> 

本文更新於 2015/12/11。