實現DIV居中佈局三種途徑(轉)

時間 2019-11-24

標籤實現 div 居中佈局三種途徑欄目 CSS 简体版

原文原文鏈接

DIV+CSS佈局有不少值得學習的地方，這裏和你們描述一下關於DIV居中佈局的實現方法，主要有三種方法，每種方法都有各自的特色，請看下文詳細介紹，相信經過本文描述你對DIV居中佈局必定會有深入的認識。javascript

關於DIV居中佈局的幾種實現方法css

如今DIV+CSS佈局愈來愈流行了，怎麼實現div居中好像是個難題。本文給出關於DIV居中佈局的幾種實現方法,相信會對你們有所幫助.html

第一種方法:java

body{  
margin:0pxauto;  
text-align:center;  
}

可是若是沒申明下面這句解析方法,頁面就會出錯.不能居中對齊!瀏覽器

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"  
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

可是有時候頁面並不能所有按上面規定的代碼格式來編寫,好比說要改多彩滾動條.佈局

第二種方法:學習

margin-left:50%;  
left:-width/2;

這裏的width不是CSS中的Width,而是你的DIV的寬度例如你的div是768px寬，那麼你就應該設置left:-384px。測試

第三種方法:使用JS來控制div居中.spa

在頁面之中添加了下面的一小段代碼.code

<scriptlanguagescriptlanguage="javascript" 
 type="text/javascript"src="function.js"></script>

function.js內容:

if(window.screen.width>800)  
{document.write("<styletypestyletype=\"text/css\"> 
 body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}

通過測試.能夠正常實現DIV居中

補充一點:上面這段JS必須放在你的最後一個CSS鏈接或</style>的後面.

◆下面是這種方法的詳細講解:

首先解釋一下JS中窗口和網頁的幾種尺寸屬性的含義

document.body.clientWidth（網頁可見區域寬）：是指瀏覽器顯示網頁的區域寬度，不包括瀏覽器的邊框寬度和垂直滾動條的寬度。大小隨着瀏覽器的窗口大小而改變。

document.body.clientHeight（網頁可見區域高）：是指瀏覽器顯示網頁的區域所能看到的高度，不包括瀏覽器的邊框寬度和水平滾動條的高度。大小隨着瀏覽器的窗口大小而改變。

document.body.scrollTop（網頁被捲去的高）：是指拉動垂直滾動條時網頁上面被地址欄及菜單欄遮蓋着的部分的高。

document.body.scrollLeft（網頁被捲去的左）：是指拉動水平滾動條時網頁左面被左邊線遮蓋着的部分的寬。

如今咱們來分析一下程序該如何實現：

第一步咱們要實現的是使層在彈出時絕對DIV居中不去考慮是否有滾動條的狀況。

1.計算出層距離顯示區域左邊和上邊的位置

注意：divId指的是所要居中的層,divId.clientWidth爲其寬度！

vardivId=document.getElementById("xxx");  
varv_left=(document.body.clientWidth-divId.clientWidth)/2;  
varv_top=(document.body.clientHeight-divId.clientHeight)/2;

2.把獲得的值從新賦給DIV的left和top屬性

divId.style.left＝v_left;  
divId.style.top=v_top;

說明：divId爲DIV標籤的id值，這樣這個層就是DIV居中顯示的了。

第二步咱們要實現的是使在拖動滾動條的狀況下彈出的層也能居中。

1.其實很簡單咱們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就OK了。

v_left+=document.body.scrollLeft;  
v_top+=document.body.scrollTop;

2.把獲得的值從新賦給DIV的left和top屬性

divId.style.left＝v_left;  
divId.style.top=v_top;

這樣顯示出來就是DIV居中的了。

完整代碼以下：

<!doctypehtmlpublic「-//w3c//dtdhtml4.0transitional//en"> 
<html> 
<head> 
<title>彈出的層居中顯示</title> 
<metanamemetaname="generator"content="editplus"> 
<metanamemetaname="author"content=""> 
<metanamemetaname="keywords"content=""> 
<metanamemetaname="description"content=""> 
 
</head> 
<body> 
<tablewidthtablewidth=100%> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
<tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 
</table> 
<dividdivid=mxhstyle="position:absolute;  
left:200px;top:30px;width:200px;height:200px;  
background-color:navy;border:2px">我是居中顯示的了。</div> 
</body> 
</html>

總結一下:

主要是這句代碼起的做用:(window.screen.width-800)/2//計算頁面應該留出的邊距數值.800爲個人DIV寬度+滾動條寬度.實際應用改成你本身的大小.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。