如何使tr容器内.away-flag-container类的td垂直居中？

我尝试将带有.away-flag-container类的td在其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;
}

目前.home-flag-container对应的元素能正常垂直居中，但.away-flag-container的td不行。我试过给.away-flag-container加内外边距，但会同时影响.home-flag-container；加height:100%也没效果。

更新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>

请问如何在不影响其他td的前提下，实现该td的垂直居中？

解决方案 #

问题核心是表格单元格默认垂直对齐规则与flex布局的冲突，以下是几种直接有效的解决方法：

1. 单独给目标td设置垂直对齐
   给.away-flag-container添加vertical-align: middle，同时确保单元格占满tr高度：

   .away-flag-container{
     display: flex;
     align-items: center;
     justify-content: start;
     vertical-align: middle; /* 强制单元格垂直居中 */
     height: 100%; /* 确保单元格高度匹配tr的70px */
   }
   

2. 全局统一单元格垂直对齐
   如果希望所有表格单元格都保持垂直居中（不影响现有布局的前提下），直接给td添加规则：

   td {
     font-size: 14px;
     vertical-align: middle; /* 全局设置垂直居中 */
   }
   

   这个方法一劳永逸，还能让表格整体布局更统一。

3. 检查图片的内外边距干扰
   确认img__padding类没有设置额外的margin/padding导致元素错位，如有需要调整：

   .img__padding {
     margin: 0; /* 清除不必要的外边距 */
     padding: 0; /* 按需调整内边距 */
   }
   

另外，初始代码中用span包裹td的写法不符合HTML规范（tr的直接子元素只能是td/th），你更新后的代码已经修正了这个问题，这是正确的做法。

内容的提问来源于stack exchange，提问作者Ignacio García