天天看點

DotNetNuke(DNN)皮膚制作--如何居中内容

設計皮膚我們遇到的第一個問題就是如何居中内容,一般使用CSS+DIV布局有兩種方法,

第一種方法是使用 auto margins,第二種方法是使用負margins

翻翻資料,使用auto margins的一般都是這麼寫的:

假設HTML部分如下:

DotNetNuke(DNN)皮膚制作--如何居中内容

<body>

DotNetNuke(DNN)皮膚制作--如何居中内容

<div id="wrapper">

DotNetNuke(DNN)皮膚制作--如何居中内容

</div>

DotNetNuke(DNN)皮膚制作--如何居中内容

</body>

現在使用auto margins居中id為wrapper的DIV,

DotNetNuke(DNN)皮膚制作--如何居中内容

#wrapper

DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容

{

DotNetNuke(DNN)皮膚制作--如何居中内容

}{

DotNetNuke(DNN)皮膚制作--如何居中内容

   width: 720px; 

DotNetNuke(DNN)皮膚制作--如何居中内容

   margin: 0 auto;

DotNetNuke(DNN)皮膚制作--如何居中内容

}

但你卻發現,按照這種“标準”寫法,皮膚安裝到DotNetNuke中後,在IE 5.x/Win、IE 6/Win中裡面卻怎麼也沒法把内容居中,auto margins方法失效了,

DotNetNuke(DNN)皮膚制作--如何居中内容

body

DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容

   text-align:center;

DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容

#wrappter

DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容

   width:720px;

DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容

   text-align: left;

DotNetNuke(DNN)皮膚制作--如何居中内容

修改完再試一試,在IE裡面也表現完美!

第二種方法是使用負的margin,這種方法也會帶來版式上的問題,且聽下回分解!