您的位置：首页 > 其它

td中的多个并排的div水平居中

2016-10-10 17:08 453 查看

td中的多个并排的div水平居中lin49940

水平排列的div，因为要设置了float: left; ， float 的优先级比 align 高，并且跟align 有冲突，所以就算td table 设置了align=“center”， td 里面的多个div 也无法居中。

解决方法参照了baihe107 同学在帮助别人的答案，“就是常见的位置宽度居中布局咯，可以使用传统的相对定位，不过这三个 div 需要外面增加两层
div 来辅助布局”。

1. 在IE6，IE8和Firefox 测试可行，IE9 测试可行（以上浏览器都没有开兼容性视图）

2. 必须的样式，一个都不能少的

<style>

.wrap1 {

    clear: left;

    float: left;

    position: relative;

    left: 50%;

}

.content1 {

    float: left;

    position: relative;

    right: 50%;

}

</style>

3. 布局，需要在原来的div 上面套多2层div，注意，放置div 的td 宽度太小的话，最右边的div 会被挤压到下一行的

<td colspan="4">

<div class="wrap1">

     <div class="content1">



             水平排列的多个div。。。。

     </div>

   </div>

</td>

demo 页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> td中的多个并排的div水平居中 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
</HEAD>

<BODY>
<style>
.wrap1 {
clear: left;
float: left;
position: relative;
left: 50%;
}
.content1 {
float: left;
position: relative;
right: 50%;
}
</style>
<table WIDTH="804px" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<tr>
<td width="257" height="35"> </td>
<td  colspan="4">
<div class="wrap1">
<div class="content1">
<div style="background: #6699cc none repeat scroll 0% 0%;float: left;">
首页
</div>
<div style="background: #6699ff none repeat scroll 0% 0%;float: left;">
首页2
</div>
</div>
</div>
</td>
<td width="157" height="35"> </td>
</tr>
</table>

</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航