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

Question

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

下面是代码sn-p：

  <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: auto 代替

margin: 0 auto;