我试图将td与类.away-flag-container放在tr容器的中心，但我不知道如何做到这一点。
这是我的表格代码：

<div className="table-container">
  <table>
      <thead>
          <tr className="table-header">
              <th>Date/Time</th>
              <th>Stadium</th>
              <th className="hometeam-row">Home Team</th>
              <th></th>
              <th>Away Team</th>
          </tr>
      </thead>
      <tbody>
      {data.map((match, index) => (
          <tr key={index}>
              <td>{formatDate(match.matchDate)}</td>
              <td>{match.stadium}</td>
              <span className="home-flag-container">
                  <td className="td-bold">{match.homeTeam}</td>
                  <td>
                      <img src={match.homeTeamFlag} alt="Home Team Flag" width="53" height="37"/>
                  </td>
              </span>
              { match.matchPlayed ?  (
                  <td className="td-bold score-row"> {match.homeTeamScore} : {match.awayTeamScore} </td>
              ) : (
                  <td className="td-bold score-row">- : -</td>
              )}
              <span className="away-flag-container">
                  <td>
                      <img src={match.awayTeamFlag} alt="Away Team Flag" width="53" height="37"/>
                  </td>
                  <td className="td-bold">{match.awayTeam}</td>
              </span>
          </tr>
      ))}
      </tbody>
  </table>
</div>

这是我的CSS样式：

/* TABLE */

.table-container{
  display: flex;
  justify-content: center;
}

table {
  border-collapse: collapse;
  width: 90%;
  color: #4B5C68;
  border-color: #E4EDF2;
}

.table-header{
  text-align: left;
  height: 40px;
  font-size: 12px;
  background: #E4EDF2;
}

tbody tr:nth-child(even) {
  background-color: #F6F7F7;
}

tr {
  border-bottom: 1px solid #E4EDF2;
  height: 70px;
}

td {
  font-size: 14px;
}

.td-bold{
  font-size: 16px;
  font-weight: 600;
}

.hometeam-row{
  text-align: right;
}

.score-row{
  text-align: center;
}

.home-flag-container{
  display: flex;
  align-items: center;
  justify-content: end;
}

.away-flag-container{
  display: flex;
  align-items: center;
  justify-content: start;
}

如下图所示，我的td类.home-flag-container垂直居中很好，但当我尝试将td类.away-flag-container居中时，它就不会居中。
我已经尝试为类.away-flag-container设置填充和边距，但它也将我的td推到类.home-flag-container。chat-gpt还建议将height: 100%;添加到.away-flag-container类中，但它不起作用。
有什么想法，我如何才能中心这个td垂直不影响我的其他td？

更新1：我已经编辑了表代码，删除了span元素，但错误仍然存在

<td className="home-flag-container td-bold">
                        {match.homeTeam}
                        <img className="img__padding" src={match.homeTeamFlag} alt="Home Team Flag" width="53" height="37"/>
                    </td>

<td className="td-bold away-flag-container">
                        <img className="img__padding" src={match.awayTeamFlag} alt="Away Team Flag" width="53" height="37"/>
                        {match.awayTeam}
                    </td>