HTML / CSS向左对齐，但保持居中

Sławek 发表于 Dev

斯拉维克

我有这样的代码：

   <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元素的中心？像这样：

我认为，这里重要的是，玩家信息可以随心所欲地增长（如果有空间），因此玩家的化身和姓名总是看起来正确（例如，姓名始终在一行中，图片是不缩小比例）。

伊泰·加尔（Itay Gal）

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。