<分区>
html - CSS:居中对齐文本，同时将容器的其他元素保持在左侧
我正在尝试创建一个标题，其中包含一个应该居中对齐的标题和一些应该在左侧的按钮。我正在尝试使用 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 属性不起作用(我期望它的方式...)，最终结果是这样的:
那么我哪里做错了，什么是正确的方法来让标题位于父容器的中心？
最佳答案
您可以使用 align-self: auto 代替
margin: 0 auto;
关于html - CSS:居中对齐文本，同时将容器的其他元素保持在左侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58184429/