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

Posted 2023-03-05

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

【英文标题】：CSS: Center align text while keeping other elements of the container to the left [duplicate]

【发布时间】：2020-01-30 17:23:16

【问题描述】：

我正在尝试创建一个标题，其中包含一个应该居中对齐的标题和一些应该在左侧的按钮。我正在尝试使用 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 属性不起作用（我期望它的方式...），最终结果是这样的：

那么我做错了什么以及在父容器的中心获取标题的正确方法是什么？

【问题讨论】：

为什么输入元素中是标题？它不应该在诸如 h 标签或 p 之类的文本持有者内吗？

因为用户必须能够更改标题。

【参考方案1】：

你可以使用 align-self: auto 代替

margin: 0 auto;

【讨论】：

不起作用。结果和上面一样

codepen.io/saksija/pen/OJLerMV 它正在工作。你试过了吗？

我点击了您的链接，情况更糟。 'teeeest' 标题一直在右边。顺便说一下，我正在使用 chrome。在 Firefox 中也有同样的结果

哦，我明白了，我看错了你的问题。尝试保证金：0自动；两边的宽度相同

好吧，至少这在 codepen 中有效（尽管由于某些奇怪的原因不在我的页面中）。如果你编辑你的答案，我会接受它是正确的。