自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS中實(shí)現(xiàn)DIV容器水平居中行之有效的辦法

作者：52css
開發(fā) 前端
在Web標(biāo)準(zhǔn)中的頁(yè)面布局是使用DIV配合CSS來實(shí)現(xiàn)的，這其中最常用到的就是使整個(gè)頁(yè)面水平居中的效果，這里向大家描述一下實(shí)現(xiàn)DIV容器水平居中的方法。

本文向大家描述一下實(shí)現(xiàn)DIV容器水平居中的方法，在Web標(biāo)準(zhǔn)中的頁(yè)面布局是使用DIV配合CSS來實(shí)現(xiàn)的，其中最常用到的就是使整個(gè)頁(yè)面水平居中的效果，這是在頁(yè)面布局中基本，也是最應(yīng)該首先掌握的知識(shí)，這里和大家分享一下。

DIV CSS教程：實(shí)現(xiàn)DIV容器水平居中的方法

在Web標(biāo)準(zhǔn)中的頁(yè)面布局是使用DIV配合CSS來實(shí)現(xiàn)的。這其中最常用到的就是使整個(gè)頁(yè)面水平居中的效果，這是在頁(yè)面布局中基本，也是最應(yīng)該首先掌握的知識(shí)。不過，還是經(jīng)常會(huì)有人問到這個(gè)問題，在這里我簡(jiǎn)單總結(jié)一下使用DIV和CSS實(shí)現(xiàn)頁(yè)面水平居中的方法：

一、margin:auto0與text-aligh:center

　　在現(xiàn)代瀏覽器（如InternetExplorer7、Firefox、Opera等）現(xiàn)代瀏覽器實(shí)現(xiàn)水平居中的方法很簡(jiǎn)單，只要設(shè)定到左右兩側(cè)的空白為自動(dòng)即可。意即：

ExampleSourceCode

  1. #wrap{margin:0auto;}  
  2.  

　　上面這段代碼的意思是說使wrap這個(gè)DIV到左右兩側(cè)的距離自動(dòng)設(shè)置，上下為0（可以為任意）。請(qǐng)?jiān)诂F(xiàn)代瀏覽器（如InternetExplorer7、Firefox、Opera等）中運(yùn)行現(xiàn)在的代碼：

SourceCodetoRun

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>52CSS.comtitle> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"
  7. content="text/html;charset=UTF-8"/> 
  8. <styletypestyletype="text/css"> 
  9. DIV#wrap{  
  10.  width:760px;  
  11.  margin:0auto;  
  12.  border:1pxsolid#333;  
  13.  background-color:#ccc;  
  14. }  
  15. style> 
  16. head> 
  17.  
  18. <body> 
  19. <DIVidDIVid="wrap"> 
  20.  

 在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0auto;即可

  1. <pre> 
  2. DIV#wrap{  
  3.  width:760px;  
  4.  margin:0auto;/*這里的0可以任意值*/  
  5.  border:1pxsolid#ccc;  
  6.  background-color:#999;  
  7. }  
  8. pre> 
  9. DIV> 
  10. body> 
  11. html> 
  12.  

 [可先修改部分代碼再運(yùn)行查看效果]

　　上面的效果很好。但是這在InternetExplorer6及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在InternetExplorer中text-align屬性是可繼承的，即在父元素中設(shè)置后在子元素中就默認(rèn)具有了該屬性。因此我們可以在body標(biāo)簽中設(shè)置text-align屬性值為center，這樣頁(yè)面內(nèi)所有的元素都會(huì)自動(dòng)居中，同時(shí)我們還要加一個(gè)hook把頁(yè)面中的文字變成我們習(xí)慣的閱讀方式——居左對(duì)齊。因此我們要如此來寫代碼：

ExampleSourceCode

  1. body{text-align:center;}  
  2. #wrap{text-align:left;}  
  3.  

　　這樣在InternetExplorer中我們就輕松實(shí)現(xiàn)了DIV的居中對(duì)齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的代碼：

ExampleSourceCode

  1. body{text-align:center;}  
  2. #wrap{text-align:left;  
  3. margin:0auto;  
  4. }  
  5.  

 SourceCodetoRun 

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>52CSS.comtitle> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
  7. <styletypestyletype="text/css"> 
  8. body{text-align:center;}  
  9. DIV#wrap{  
  10.  text-align:left;  
  11.  width:760px;  
  12.  margin:0auto;  
  13.  border:1pxsolid#333;  
  14.  background-color:#ccc;  
  15. }  
  16. style> 
  17. head> 
  18.  
  19. <body> 
  20. <DIVidDIVid="wrap"> 
  21.  

在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0auto;即可
 

  1. <pre> 
  2. DIV#wrap{  
  3.  width:760px;  
  4.  margin:0auto;/*這里的0可以任意值*/  
  5.  border:1pxsolid#ccc;  
  6.  background-color:#999;  
  7. }  

 在InternetExplorer6及以下的版本中我們還要做以下的設(shè)置： 

  1.  body{text-align:center;}  
  2.  
  3.  DIV#wrap{  
  4.  text-align:left;  
  5.  }  
  6. pre> 
  7. DIV> 
  8. body> 
  9. html> 
  10.  

 [可先修改部分代碼再運(yùn)行查看效果]

　　不過這里有一個(gè)前提，就是設(shè)置居中的元素要有固定的寬度，比如這里我們?cè)O(shè)定了為760像素。#p#

二、相對(duì)定位與負(fù)的邊距

　　對(duì)于wrap進(jìn)行相對(duì)定位，然后使用負(fù)的邊距抵消偏移量。這種方法比較簡(jiǎn)單還很容易實(shí)現(xiàn)：

ExampleSourceCode 

  1. #wrap{  
  2. position:relative;  
  3. width:760px;  
  4. left:50%;  
  5. margin-left:-380px  
  6. }  
  7.  

　　這段代碼的意思是，設(shè)置wrap的定位是相對(duì)于其父元素body標(biāo)簽的，然后將其左邊框移動(dòng)到頁(yè)面的正中間（也就是left:50%含意）；***我們?cè)購(gòu)闹虚g位置向左偏移回一半的距離來，這樣就實(shí)現(xiàn)了水平居中了。

SourceCodetoRun 

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>52CSS.comtitle> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
  7. <styletypestyletype="text/css"> 
  8. DIV#wrap{  
  9.  position:relative;  
  10.  width:760px;  
  11.  left:50%;  
  12.  margin-left:-380px;  
  13.  border:1pxsolid#333;  
  14.  background-color:#ccc;  
  15. }  
  16. style> 
  17. head> 
  18.  
  19. <body> 
  20. <DIVidDIVid="wrap"> 
  21.  

在所有瀏覽器中都有效的方法： 

  1. <pre> 
  2. DIV#wrap{  
  3.  position:relative;  
  4.  width:760px;  
  5.  left:50%;  
  6.  margin-left:-380px;  
  7.  border:1pxsolid#333;  
  8.  background-color:#ccc;  
  9. }  
  10. pre> 
  11. DIV> 
  12. body> 
  13. html> 
  14.  

 [可先修改部分代碼再運(yùn)行查看效果]
　　同樣，在設(shè)定水平居中前你需要設(shè)定一個(gè)固定的寬度。

◆究竟選擇哪個(gè)方法？

　　上面兩個(gè)方法究竟選擇哪種方法好呢？在***種方法中貌似使用了Hack技術(shù)，其實(shí)并沒有，它是中規(guī)中矩的Web標(biāo)準(zhǔn)寫法，完全符合規(guī)范，因此，兩個(gè)種方法中完全可以隨便的選取其中的任一種進(jìn)行使用，他們不存在CSShack的問題。#p#

三、其它的居中方式

　　上面所說的都是設(shè)定了具體寬度的情況下水平居中的實(shí)現(xiàn)。有時(shí)候我們想做一個(gè)彈性布局，或者當(dāng)一個(gè)元素處于一個(gè)容器中時(shí)我們只想讓它居中并不想設(shè)定一個(gè)具體的寬度。其實(shí)這并不是真正的居中布局，就像對(duì)一個(gè)100%長(zhǎng)度的元素來說，你說它是居中對(duì)齊還是居左對(duì)齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設(shè)計(jì)我們是使用的像元素的padding來設(shè)置的，實(shí)際中我們是改變了父元素的容器大小：
如我們希望wrap元素長(zhǎng)度隨窗口而改變，同時(shí)又維持居中，我們就可以這樣寫：

ExampleSourceCode

  1. body{  
  2. padding:10px150px;  
  3. }  
  4.  

　　這里，我們只需要保持父元素左右兩側(cè)的填充是相等的就可以了。

SourceCodetoRun 

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>52CSS.comtitle> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
  7. <styletypestyletype="text/css"> 
  8. body{  
  9.  padding:10px150px;  
  10. }  
  11. DIV#wrap{  
  12.  border:1pxsolid#333;  
  13.  background-color:#ccc;  
  14. }  
  15. style> 
  16. head> 
  17.  
  18. <body> 
  19. <DIVidDIVid="wrap"> 
  20.  

 一種隨瀏覽器窗口大小而改變的具有彈性的居中布局： 

  1. <pre> 
  2. body{  
  3.  padding:10px150px;  
  4. }  
  5.  
  6. 這里，我們只需要保持父元素左右兩側(cè)的填充是相等的就可以了。  
  7. pre> 
  8. DIV> 
  9. body> 
  10. html> 
  11.  

 　　當(dāng)然這只是“貌似居中”，不過卻常常很有用處。
 

【編輯推薦】

  1. CSS中實(shí)現(xiàn)DIV容器垂直居中方法揭秘
  2. CSS布局中float和position屬性使用技巧
  3. 四種方法輕松實(shí)現(xiàn)CSS隔行換色
  4. CSS Sprites對(duì)CSS布局的意義及優(yōu)缺點(diǎn)
  5. CSS布局中display:inline-block屬性用法詳解

 

 

責(zé)任編輯：佚名 來源： 52css.com
CSS水平居中
相關(guān)推薦

2010-08-26 09:27:07

CSS居中

2010-09-15 12:32:23

DIV頁(yè)面

2010-08-30 11:22:24

DIVCSS

2010-08-23 10:04:48

CSS浮動(dòng)

2010-08-18 16:10:35

IE6CSS

2010-08-06 09:28:53

Flex頁(yè)面跳轉(zhuǎn)

2010-09-10 13:24:21

DIV表格

2010-07-23 16:10:34

Perl用戶函數(shù)

2010-05-25 14:42:58

刪除SVN版本信息

2010-07-06 11:44:49

UML活動(dòng)圖

2010-07-29 10:09:09

Flex數(shù)據(jù)庫(kù)

2010-07-06 13:11:50

Visio畫UML圖

2010-06-30 17:06:32

UML用例圖

2010-03-23 16:41:17

云計(jì)算

2010-09-09 10:15:35

DIVCSS

2010-08-18 14:32:07

IE6IE7IE8

2010-09-02 13:03:38

CSS垂直居中

2010-07-06 13:20:57

Visio畫UML用例

2015-03-03 09:13:22

2015-03-16 11:16:59

生物識(shí)別身份驗(yàn)證數(shù)據(jù)中心
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)