Angular中如何让列表元素整体居中且保持左对齐起始位置？

步骤1：添加外层容器 #

给循环渲染的用户列表套一个外层容器，用来实现整体居中：

<div class="user-list-container">
  <div *ngFor="let user of users | async; index as userId">
    <h3>
      <span><img [src]="user.avatar" class="e-avatar"></span>
      <a [title]="user.username" [routerLink]="['/messagewindow', usercurrentId, userId+1]">
        {{ user.username }}
      </a>
    </h3>
  </div>
</div>

步骤2：添加CSS样式 #

通过以下CSS实现整体居中+内部左对齐，同时优化头像对齐效果：

/* 外层容器：水平居中，限制最大宽度避免过宽 */
.user-list-container {
  max-width: 420px; /* 可根据需求调整宽度 */
  margin: 0 auto;
  padding: 20px 0; /* 上下留白，提升视觉效果 */
}

/* 每个用户项：左对齐，统一X起始位置 */
.user-list-container > div {
  text-align: left;
  margin-bottom: 16px; /* 每个用户项之间的间距 */
}

/* 头像：固定尺寸，避免不同大小的头像打乱对齐 */
.e-avatar {
  width: 36px;
  height: 36px;
  object-fit: cover; /* 保证头像不变形 */
  border-radius: 50%; /* 可选：设置圆形头像 */
  vertical-align: middle; /* 让头像和文字垂直居中对齐 */
  margin-right: 10px;
}

效果说明 #

• 外层容器的margin: 0 auto让整个列表在页面水平居中
• text-align: left确保每个用户项的内容从同一X坐标开始对齐
• 固定头像尺寸可以避免因头像大小不一导致的排版混乱

内容的提问来源于stack exchange，提问作者Vulsan Bianca