HTML/CSS 左对齐但保持居中

Question

我有这样的代码：

   <style>
      table {
        width: 20%;
        border: 1px solid black;
      }
    
      .player_line {
        display: flex;
        align-items: center;
      }
    
      .player_left,
      .player_right {
        flex: 1;
        border: 1px solid red;
      }
    
      .player_avatar {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
    </style>
    
    <table>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            A long user name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            Not long name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="player_line">
            <div class="player_left"></div>
            <div class="player_avatar" style="background-image: url(./assets/static/images/user.png)"></div>
            A super long name
            <div class="player_right"></div>
          </div>
        </td>
      </tr>
    </table>

这看起来像：

我能做些什么来对齐头像，让它们总是向左对齐，但整个玩家信息（头像 + 名称）仍然在 td 元素的中心？ 像这样：

我认为，这里重要的是玩家信息可以随心所欲地增长（如果有空间），所以玩家的头像和名字总是看起来正确的（例如，名字总是在一行中，并且图片未缩小）。

Answer 1

不确定红线是否是必需的，但我会尝试像这样一个非常简单的解决方案，设置一个可以根据内容增长的容器并将其居中放置在正文中。这是一个例子：

body{
  width:100%;
  padding: 0; 
  margin: 0;
}

.container{
  display: flex;
  justify-content: center;
  width:100%;
}

.content{
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.player img{
  width: 20px;
}

<div class="container">
  <div class="content">
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png"> 
      Name 1</div>
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png"> 
      Name 2 Longer</div>
    <div class="player">
      <img src="https://png.pngitem.com/pimgs/s/508-5087236_tab-profile-f-user-icon-white-fill-hd.png">
      Name 3 A very long name</div>
  </div>
</div>

Answer 2

修改为：

.player_line {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}