div层居中和table居中

 

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