關于DIV居中布局的幾種實現方法

2010-08-28 10:47:36來源：西部e網作者：

現在DIV+CSS布局越來越流行了，所以咱也得趕上潮流，前陣有人問過我關于DIV居中布局的問題，當時我也不太懂，于是便一起研究了一下，今天就來作個小結。

最先發現的是XHTML里用margin實現居中布局。這種方法是從Z-BLOG官方網站挖出來的。至今不知道原理，實踐得知若不在頂部加上<!DOCTYPE ... > 就不能正常居中。所以臨時斷定，此法為XHTML專用方法。有知道詳情的希望提供相關文檔，謝謝~!^_^

看以下示例，去掉第一行就發現居中失效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    #Content{
      margin-left: auto;
	  margin-right: auto;
	  background: #090;
	  width: 455px;
	  height: 96px;
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

再接下來這種方法算是"偏方"了，不知道哪個牛人想出來的？利用left和margin-left間接實現。left為50%(頁面的一半)，margin-left為-width的一半。這樣兩個一半之差，就正好是DIV的中心座標了。妙哉！順便提下，這種方法還需要先設定position為relative 才能正常顯示。
后來我把margin-left的值用expression自動計算，這樣就只剩一個width參數需要自定了。

看以下示例，注意第一二行與上例的差別。

<html>
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    #Content{
	  background: #090;
	  width: 455px;
	  height: 96px;
	  position: relative;
	  left: 50%;
	  margin-left: expression(-(this.offsetWidth/2)+"px");
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

我所有的效果都是在IE6下調試的，不知道在其他瀏覽器下效果如何。以下這種是我昨天無意中看到的，據說最低可以支持到IE3.0，非IE偶也8考慮。(嘿嘿……這句估計會遭扁了。)基本原理是利用body的text-align來實現居中。

不多說了，看代碼。

<html>
<head>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Xiaosa">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
<!--
/* Coded By Xiaosa @ 2005-9-17  */
    body {
      text-align: center;
	}

    #Content {
	  text-align: left;
	  background: #090;
	  width: 455px;
	  height: 96px;
	}

	#inner {
      background: url(http://xs.org.cn/2005/xsblog/style/cartoon/banner.gif) no-repeat;
	  width:100%;
	  height:100%;
	}
-->
</style>

</HEAD>
<BODY>

   <div id="Content">
       <div id="inner">
	   </div>
   </div>

</BODY>
</HTML>

關鍵詞：xhtml

成人午夜激情影院,小视频免费在线观看,国产精品夜夜嗨,欧美日韩精品一区二区在线播放

關于DIV居中布局的幾種實現方法

相關閱讀:

贊助商鏈接: