td中的多个并排的div⽔平居中
td中的多个并排的div⽔平居中lin49940
⽔平排列的div，因为要设置了float: left; ， float 的优先级⽐ align ⾼，并且跟align 有冲突，所以就算td table 设置了
align=“center”， td ⾥⾯的多个div 也⽆法居中。
解决⽅法参照了 同学在帮助别⼈的答案，“就是常见的位置宽度居中布局咯，可以使⽤传统的相对定位，不过这三个 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 >  ⾸页
</div>
<div >  ⾸页2
</div>
</div>
</div>
</td>
div中的div居中
<td width="157" height="35"> </td>
</tr>
</table>
</BODY>
</HTML>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。