首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

IE下为何不居中?如何弄都不能居中

2013-07-16 
IE下为何不居中?怎么弄都不能居中代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

IE下为何不居中?怎么弄都不能居中
代码


<!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">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
  background: #FFF;/*背景属性*/
  font-family: Arial, Helvetica, sans-serif;/*字体备用*/
  color: #555555;/*颜色*/
  padding: 0px;/*内边距:按上右下左排序*/
  margin: 5px;/*外边距:按上右下左排序*/
  width: 100%;/*宽度*/
    /*文本对齐方式:left把文本排列到左边。默认值:由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
  font-size: 9pt;/*字体大小*/
}

#nav{
  font-size: 20px;/*字体的尺寸*/
  font-family: Arial, Helvetica, sans-serif;/*字体备用*/
  margin:50px auto;/*外边距:按上右下左排序 auto:表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等,不同的浏览器有不同的自动适应效果。
*/ 
text-align: center; 
}
#nav ul{
  margin: 0px;/*外边距:按上右下左排序*/
  padding: 0px;/*内边距:按上右下左排序*/
  list-style-type: none;/*列表格式:无*/
  margin:0 auto;
}
#nav li{  
  float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
  }
#nav li a{
  text-decoration: none;/*文本的修饰方法*/
  color: #ffffff;  /*颜色*/
  background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
  width: 150px;/*宽度*/
  line-height: 49px;/*高度*/
  display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
  color: #ffffff;  /*颜色*/
  background: url(1.jpg) no-repeat 0px -50px;   /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav" margin: 0 auto>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>


</ul></div>
</body>
</html>
[解决办法]
鉴于你这代码粘贴的格式  我就不看了
居中的话


body,div{padding:0px; margin:0px; border:0px;}
.center{width:960px; margin:0px auto;}


<body>
    <div class="center">
        <!--*******放居中的内容******-->
    </div>
</body>

[解决办法]
#nav{width:960px;margin:0px auto;}
[解决办法]
要居中,要给宽度的。
[解决办法]
好吧,你的代码我的ie什么都不显示...
[解决办法]
<!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">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
  background: #FFF;/*背景属性*/
  font-family: Arial, Helvetica, sans-serif;/*字体备用*/
  color: #555555;/*颜色*/
  padding: 0px;/*内边距:按上右下左排序*/
  margin: 5px;/*外边距:按上右下左排序*/
  width: 100%;/*宽度*/
    /*文本对齐方式:left把文本排列到左边。默认值:由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
  font-size: 9pt;/*字体大小*/
}

#nav{
  font-size: 20px;/*字体的尺寸*/
  font-family: Arial, Helvetica, sans-serif;/*字体备用*/
  margin:50px auto;/*外边距:按上右下左排序 auto:表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等,不同的浏览器有不同的自动适应效果。*/
  width:1000px;
  text-align: center; 
}
#nav ul{
  margin: 0px;/*外边距:按上右下左排序*/
  padding: 0px;/*内边距:按上右下左排序*/


  list-style-type: none;/*列表格式:无*/
  margin:0 auto;
}
#nav li{  
  float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
  }
#nav li a{
  text-decoration: none;/*文本的修饰方法*/
  color: #ffffff;  /*颜色*/
  background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
  width: 140px;/*宽度*/
  line-height: 49px;/*高度*/
  display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
  color: #ffffff;  /*颜色*/
  background: url(1.jpg) no-repeat 0px -50px;   /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
</ul></div>
</body>
</html>

 
[解决办法]
页面空白什么也没有

热点排行