容器内文本对齐异常问题（PHP/CSS）求助

期望效果：两个红色盒子内的标题居中显示，列表内容左对齐且整体靠近盒子左侧；
实际效果：第一个盒子的“Liste des joueurs”标题未居中，且盒子左侧存在间距，第二个盒子的“Paramètres”标题紧贴左侧；同时两个盒子的列表内容虽左对齐，但整体偏向盒子右侧。

现有HTML代码 #

<body>
  <h2>Classique</h2>
  <div class="container-lobby">
    <div class="box-lobby">Liste des joueurs
      <ul class="joueurs-ul">
        <li class="joueurs-li">Joueur 1</li>
        <li class="joueurs-li">Joueur 2</li>
        <li class="joueurs-li">Joueur 3</li>
      </ul>
    </div>
    <div class="box-lobby">Paramètres
      
      <ul class="joueurs-ul">
        <li class="joueurs-li">Timer :</li>
        <li class="joueurs-li">Pénalités :</li>
        <li class="joueurs-li">Nombre de manches :</li>
        <li class="joueurs-li">Filtre catégories :</li>
      </ul>
    </div>
  </div>
</body>

现有CSS代码 #

.container-lobby {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: start;
  margin-top: 50px;
}

.box-lobby {
  background-color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 25px;
  color: white;
  width: 440px;
  height: 500px;
  margin: 0 150px;
  display: flex;
  align-items: start;
}

.joueurs-li {
  margin-top: 25px;
}

.joueurs-ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 20px;
  text-align: left;
}

存在的问题 #

• “Liste des joueurs”未居中，盒子左侧有间距，“Paramètres”紧贴盒子左侧；
• li/ul内容左对齐，但整体贴向盒子右侧。

解决思路及修改代码 #

问题根源

.box-lobby使用display:flex但未设置垂直排列，导致标题和ul在同一行布局，引发错位和间距问题；同时ul未占满盒子宽度，导致内容偏向右侧。

修改后的HTML代码

给盒子内的标题单独添加<h3>标签，明确结构：

<body>
  <h2>Classique</h2>
  <div class="container-lobby">
    <div class="box-lobby">
      <h3>Liste des joueurs</h3>
      <ul class="joueurs-ul">
        <li class="joueurs-li">Joueur 1</li>
        <li class="joueurs-li">Joueur 2</li>
        <li class="joueurs-li">Joueur 3</li>
      </ul>
    </div>
    <div class="box-lobby">
      <h3>Paramètres</h3>
      <ul class="joueurs-ul">
        <li class="joueurs-li">Timer :</li>
        <li class="joueurs-li">Pénalités :</li>
        <li class="joueurs-li">Nombre de manches :</li>
        <li class="joueurs-li">Filtre catégories :</li>
      </ul>
    </div>
  </div>
</body>

修改后的CSS代码

调整flex布局方向，优化元素对齐和间距：

.container-lobby {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: start;
  margin-top: 50px;
}

.box-lobby {
  background-color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 25px;
  color: white;
  width: 440px;
  height: 500px;
  margin: 0 150px;
  display: flex;
  flex-direction: column; /* 垂直排列标题和列表 */
  align-items: center; /* 标题水平居中 */
  padding-top: 20px; /* 标题与盒子顶部间距 */
  box-sizing: border-box; /* 防止padding撑开盒子 */
}

.box-lobby h3 {
  margin: 0 0 25px 0; /* 标题与列表的间距 */
  font-size: inherit;
}

.joueurs-li {
  margin-top: 25px;
}

.joueurs-ul {
  list-style-type: none;
  margin: 0;
  padding: 0 20px; /* 列表左右留白，避免贴边 */
  width: 100%; /* 占满盒子宽度，保证内容左对齐 */
  text-align: left;
}

修改说明

1. 用<h3>包裹标题，分离标题和列表的布局，避免flex同行排列的冲突；
2. 给.box-lobby设置flex-direction: column让子元素垂直排列，align-items: center实现标题居中；
3. 添加box-sizing: border-box确保盒子尺寸不受padding影响；
4. 给joueurs-ul设置width: 100%，让列表占满盒子宽度，配合padding实现内容左对齐且靠近左侧；
5. 调整标题的margin，控制标题与列表的间距，优化视觉效果。

内容的提问来源于stack exchange，提问作者Syyynkz