CSS：居中对齐文本，同时将容器的其他元素保持在左侧

Question

我正在尝试创建一个标题，该标题包含应居中对齐的标题和应位于左侧的一些按钮。我正在尝试使用flexbox和 align-self 属性，但无法正常工作。

下面是代码段：

  <div class="container">
    <span>
      <button pButton type="button" class="btn" icon="fa fa-check" iconPos="left" (click)="save()" label="Save"></button>
      <button pButton type="button" class="btn" (click)="fileInput.click()" label="Load file"></button>
      <input hidden type="file" #fileInput accept=".json" (change)="loadFile($event)" />
      <button pButton type="button" class="btn ui-button-success" iconPos="left" (click)="lockPage = !lockPage"
        [icon]="lockPage ? 'fa fa-unlock' : 'fa fa-lock'"></button>
    </span>
    <span style="align-self: center">
      <input type="text" class="name" pInputText [(ngModel)]="model.name" (keydown.enter)="$event.target.blur()" />
    </span>
  </div>

和CSS：

.container {
    display: flex;
    justify-content: flex-start;
}

但是 align-self 属性不起作用（我期望的方式...），最终结果是这样：

那么我在做什么错了？将标题放在父容器中心的正确方法是什么？

Answer 1

您可以使用代替align-self：自动

margin: 0 auto;