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属性值会影响你的居中显示。
?