HTML/CSS align to left but keep center

Question

I have code like this:

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

This will look like:

What I can do, to align the avatars, so they are always aligned to left, but the whole player info (avatar + name) is still center in the td element? Like so:

I think that, the important thing here is that the player info can grow as it please (if there is space), so the avatar and name of the player always look correct (e.g. the name is always in one line, and the picture is not down scaled).

Answer 1

Not sure if the red line is a requirement or not, but I would try a much simple solution like this one, set a container that can grow according to the content and center it inside the body. Here's an example:

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

Modify to this :

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