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>