div层居中与table居中如何实现?div中table居中的例子

发布时间:2020-01-28编辑:脚本学堂
推荐: 解读:div中table居中多种方法1、网页内容要居中显示。有两种方式:1.div层居中;2.table表格居中例1.table居中.在table标签中设置align为center。
复制代码 代

推荐:

1、网页内容要居中显示。

有两种方式:1.div层居中;2.table表格居中

例1.table居中.在table标签中设置align为center。

复制代码 代码示例:
<style> 
.style{ 
  border:solid 1px blue; 
 
}
</style> 
<table width="940"  align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td rowspan="2" align=left  class="style"> 
表格居中 
</td> 
<td width="270" class="style">表格居中2</td> 
</tr> 
<tr> 
<td align=center class="style" > 
表格居中 
</td> 
</tr> 
</table> 
<table width="940"  align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td rowspan="2" align=left  class="style"> 
表格左对齐 
</td> 
<td width="270" class="style">表格左对齐</td> 
</tr> 
<tr> 
<td align=center class="style" > 
表格左对齐
</td> 
</tr> 
</table> 
 
<table width="940" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td rowspan="2" align=left  class="style"> 
表格右对齐 
</td> 
<td width="270" class="style">表格右对齐</td> 
</tr> 
<tr> 
<td align=center class="style" > 
表格右对齐
</td> 
</tr> 
</table> 

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