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