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

最新推荐文章于 2025-06-06 22:51:36 发布

lin49940

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量9.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lin49940/article/details/52779439

本文介绍了一种使HTML表格单元格(td)内的多个并排div水平居中的方法。通过在外层使用相对定位和left/right属性，解决了float布局与align属性冲突的问题，实现了跨浏览器兼容的居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

水平排列的多个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>