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%;
}