程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> 使用jQuery創建水平和垂直居中的網站

使用jQuery創建水平和垂直居中的網站

編輯:關於JAVA
 

最近在做一個紅酒相關的網站,因為對設計要求比較高,所以做了一個圖片感比較強的網站,但是發現在大分辨率,特別是4:3的時候很奇怪,所以想讓網頁水平垂直都居中,就是讓一個div實現水平和垂直居中,雖然好幾種方式實現,但是今天介紹時我最喜歡的方法,通過css和jQuery實現。

1、通過css實現水平居中:

 

    1 2 3 4 5 .className{ margin:0 auto; width:200px; height:200px; }

 

2、通過css實現水平居中和垂直居中

通過css創建一個水平居中和垂直居中的div是一件比較麻煩的事情,您必須事先知道另外一個div的尺寸:

      1 2 3 4 5 6 7 8 .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; }

 

3、通過jQuery實現

水平居中和垂直居中前面已經提到過了,css的方法只適用於有固定尺寸的div,所以到jQuery發揮作用了:

    1 2 3 4 5 6 7 8 9 $(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); }); //初始化函數 $(window).resize();

 

 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved