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

div层正中和table居中

2012-09-22 
div层居中和table居中?1.网页开发的时候,网页内容要居中显示。经常用到的方式有两种方式:1.div层居中;2.tab

div层居中和table居中

?

1.网页开发的时候,网页内容要居中显示。经常用到的方式有两种方式:1.div层居中;2.table表格居中

实例1.table居中.在table标签中设置align为center就可以

?

??实例2.div层布局,设置层css属性:position:relative;left:50%;margin-left:-width/2;

<style>.style{  border:solid 1px blue;}.div_main{border:solid 1px blue;float:center;}.div_style1{  /*设置层1居中*/  position:relative;    border:solid 1px red;  width:940px;  left:50%;  margin-left:-470px;  }.div_style2{  border:solid 1px yellow;}.div_in_div1{background-color:green;width:200px;height:150px;/*设置下一个层靠左对齐*/float:left;}.div_in_div2{background-color:grey;width:200px;height:150px;/*设置下一个层靠左对齐*/float:left;}.div_in_div3{background-color:pink;width:200px;height:150px;/*设置靠右对齐*/float:right;}hr{color:blue;}.independ{/*设置宽,高*/width:800px;height:300px;/*设置居中*/position:relative;left:50%;margin-left:-400px;border:solid 1px gray;background-color:gray;}</style>  <div class="independ"></div><div class="div_main">  <div class="div_style1">     层布局 1   <hr><div class="div_in_div1">层中层1</div>  <div class="div_in_div2">层中层2</div><div class="div_in_div3">层中层3</div>  </div>    <div class="div_style1">     层布局  2  </div>     <div class="div_style2">     层布局  3  </div></div>

总结:以上的内容测试在IE浏览器中,后来发现显示在火狐浏览器中就会出现左对齐,而不居中。

在为了兼容IE浏览器和火狐浏览器:在body标签样式中设置text-align:ceter;表示body标签中的内容要水平居中显示,然后再body标签中的table或div层中设置width宽度,还有margin:0 auto;说明水平方向上自由活动。

注意还要body标签中的table和层得float属性,float属性值会影响你的居中显示。

?

热点排行