關(guān)于DIV居中布局的幾種實(shí)現(xiàn)方法

2010-08-28 10:47:36來(lái)源：西部e網(wǎng)作者：

現(xiàn)在DIV+CSS布局越來(lái)越流行了，所以咱也得趕上潮流，前陣有人問(wèn)過(guò)我關(guān)于DIV居中布局的問(wèn)題，當(dāng)時(shí)我也不太懂，于是便一起研究了一下，今天就來(lái)作個(gè)小結(jié)。

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

看以下示例，去掉第一行就發(fā)現(xiàn)居中失效。

<!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>

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

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

<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下調(diào)試的，不知道在其他瀏覽器下效果如何。以下這種是我昨天無(wú)意中看到的，據(jù)說(shuō)最低可以支持到IE3.0，非IE偶也8考慮。(嘿嘿……這句估計(jì)會(huì)遭扁了。)基本原理是利用body的text-align來(lái)實(shí)現(xiàn)居中。

不多說(shuō)了，看代碼。

<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>

關(guān)鍵詞：xhtml

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

關(guān)于DIV居中布局的幾種實(shí)現(xiàn)方法

相關(guān)閱讀:

贊助商鏈接: