CSS布局技巧：实现导航栏与表格的精准居中

或更外层的容器）上应用text-align: center。

1. 移除float属性： 从.nav-g a中移除float: left。
2. 设置inline-block： 确保
3. 元素设置为display: inline-block，使其可以并排显示，同时保持块级元素的特性（如设置宽度和高度）。
4. 父元素居中： 在包含导航项列表的父元素（例如.nav-g ul）上应用text-align: center。这将对所有内联或内联块级子元素（即
5. ）生效。

修正后的CSS代码示例：

.nav-g ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* 关键：使内联块级子元素居中 */
}

.nav-g li {
  list-style: none;
  display: inline-block; /* 使导航项并排显示 */
}

.nav-g a {
  text-decoration: none;
  width: 100px; /* 根据需要调整宽度 */
  display: block; /* 使链接填充整个li区域 */
  padding: 2px;
  font-size: 15px;
  font-weight: lighter;
  text-align: center;
  color: white;
  font-family: arial;
  /* 移除 float: left; */
}

通过这种方式，导航栏的链接将作为一个整体在父容器中水平居中。

宣小二

宣小二：媒体发稿平台，自媒体发稿平台，短视频矩阵发布平台，基于AI驱动的企业自助式投放平台。

下载

现代布局方案：Flexbox 对于更复杂的导航栏布局，Flexbox（弹性盒子）是更强大和灵活的选择。通过将父容器设置为display: flex，并结合justify-content: center，可以轻松实现子元素的居中。

.nav-g ul {
  display: flex; /* 启用Flexbox */
  justify-content: center; /* 水平居中所有子项 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-g li {
  /* 不再需要 display: inline-block; */
  /* 其他样式保持不变 */
}

Flexbox提供了更好的控制和响应能力，是现代网页布局的首选。

三、表格的水平居中布局

表格作为块级元素，其居中方式与内联元素有所不同。

问题分析： 原始代码中，.bet-table容器被设置了display: table-cell。table-cell属性会使元素表现得像表格单元格，这会干扰其正常的块级行为和居中机制。虽然table元素自身设置了margin-left: auto; margin-right: auto;，但如果父容器的display属性不当，可能会导致预期外的布局。

解决方案：移除display: table-cell并使用margin: 0 auto

要使块级元素（如

1. 移除不必要的display属性： 从.bet-table中移除display: table-cell。默认的display: block行为或不指定display属性通常更合适。
2. 应用margin: 0 auto： 确保

修正后的CSS代码示例：

.bet-table {
  /* 移除 display: table-cell; */
  margin: 0; /* 保持其他边距设置 */
  color: white;
  /* text-align: center; */ /* 对表格自身居中无效，但可用于内部文本 */
  /* width: 100%; */ /* 根据需要设置 */
}

.bet-table table {
  margin: 0 auto; /* 关键：使表格水平居中 */
  width: 100%; /* 确保表格有宽度，否则margin: auto无效 */
  border-collapse: collapse; /* 推荐：合并边框 */
}

.bet-table th,
td {
  border: 1px solid white; /* 边框颜色与背景区分 */
  text-align: center;
  padding: 5px;
}

通过移除.bet-table上的display: table-cell并为table元素设置margin: 0 auto，表格将会在其父容器中正确居中。

四、综合示例与注意事项

将上述修正应用到完整的代码中，可以得到一个结构清晰、布局正确的页面。

修正后的HTML结构示例：

  
Betbowl
 
  

    

      
Make-A-Bet
 
      
Pending
      
Completed
    
  


  
Choose