CSS布局技巧：居中导航栏与表格的实践指南

<li><a href="#">Make-A-Bet</li>

<li><a href="#">Make-A-Bet</a></li>

<div id="h-container">
  <h2 class="logo">Betbowl</h2> <!-- 确保h2标签正确闭合 -->
  <div class="nav-g">
    <ul>
      <li><a href="#">Make-A-Bet</a></li>
      <li><a href="#">Pending</a></li>
      <li><a href="#">Completed</a></li>
    </ul>
  </div>
</div>

/* 导航列表的父容器 */
.nav-g ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* 关键：使内部的inline-block子元素居中 */
}

/* 导航项 */
.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; /* 移除float属性，因为它会使元素脱离文档流，影响居中 */ */
}

<div class="bet-table">
  <table style="width:100%;"> <!-- 移除内联的margin-left/right样式，交由CSS处理 -->
    <tr>
      <th>Situation</th>
      <th>Bet</th>
      <th>Winner</th>
      <th>Earnings</th>
    </tr>
    <!-- ...表格内容... -->
  </table>
</div>

.bet-table {
  /* display: table-cell; /* 移除此属性，它会改变元素的布局行为，可能干扰表格居中 */ */
  margin: 0 auto; /* 关键：使bet-table容器自身居中，如果它有固定宽度 */
  color: white;
  text-align: center; /* 如果bet-table内部有文本或inline元素需要居中，可以保留 */
  width: 100%; /* 如果bet-table需要占据父容器的全部宽度 */
}

.bet-table table {
  margin: 0 auto; /* 关键：使表格本身居中 */
  width: 100%; /* 确保表格有明确的宽度，margin: auto才能生效 */
}

/* 其他表格样式 */
.bet-table th,
td {
  border: 1px solid;
  text-align: center;
  padding: 5px;
}

<div id="h-container">
  <h2 class="logo">Betbowl</h2>
  <div class="nav-g">
    <ul>
      <li><a href="#">Make-A-Bet</a></li>
      <li><a href="#">Pending</a></li>
      <li><a href="#">Completed</a></li>
    </ul>
  </div>
</div>
<div class="Choose">
  <h3>Choose</h3>
</div>
<div class="bet-table">
  <table>
    <tr>
      <th>Situation</th>
      <th>Bet</th>
      <th>Winner</th>
      <th>Earnings</th>
    </tr>
    <tr>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
      <td>blank</td>
    </tr>
  </table>
</div>

* {
  background-color: #2c2f33;
  text-decoration: none;
  box-sizing: border-box; /* 推荐：统一盒模型 */
}

body {
  margin: 0; /* 移除body默认外边距 */
}

.logo {
  text-align: center;
  font-size: 40px;
  font-family: arial;
  font-weight: lighter;
  color: white;
  margin: 0; /* 移除h2默认外边距，避免影响布局 */
  padding: 20px 0; /* 适当增加内边距 */
}

.nav-g ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* 使li元素居中 */
  background-color: #36393f; /* 为导航栏背景色 */
  padding: 10px 0;
}

.nav-g li {
  display: inline-block; /* 使li并排显示 */
  margin: 0 10px; /* li之间添加间距 */
}

.nav-g a {
  text-decoration: none;
  display: block; /* 使a填充li的区域，可设置padding */
  padding: 8px 15px; /* 增加点击区域 */
  font-size: 15px;
  font-weight: lighter;
  color: white;
  font-family: arial;
  border-radius: 5px; /* 圆角效果 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.nav-g a:hover {
  color: #7289da;
  background-color: #4a4d52; /* 悬停背景色 */
}

.Choose h3 {
  color: white;
  background-color: #7289da;
  padding: 8px;
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  margin-top: 5pc;
  text-align: center; /* 标题文本居中 */
}

.bet-table {
  margin: 20px auto; /* 容器居中并添加上下外边距 */
  color: white;
  width: 80%; /* 示例：设置容器宽度，以便margin:auto生效 */
  max-width: 960px; /* 限制最大宽度 */
}

.bet-table table {
  width: 100%; /* 表格宽度占满父容器 */
  margin: 0 auto; /* 使表格自身居中 */
  border-collapse: collapse; /* 合并边框 */
}

.bet-table th,
td {
  border: 1px solid #4a4d52; /* 边框颜色 */
  text-align: center;
  padding: 10px;
}

.bet-table th {
  background-color: #36393f; /* 表头背景色 */
}