CSS: Center align text while keeping other elements of the container to the left

Question

I am trying to create a header that contains a title that should be center aligned and some buttons that should be on the left. I'm trying to use flexbox and the align-self property but I can't get it to work.

Below is the code snippet:

  <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>

and the css:

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

However the align-self property doesn't work (the way I expect it to...) and the end result is this:

So what am I doing wrong and what is the proper way to get the title in the center of the parent container?

Why is the title in the input element? Shouldn't it be inside some text holder like h tag or p? — protestator, Oct 01 '19 at 12:12

protestator · Answer 1 · 2019-10-01T13:44:21.667

1

Instead of align-self: auto you can use

margin: 0 auto;

edited Oct 01 '19 at 13:44

answered Oct 01 '19 at 12:14

protestator

311
1
15

Doesn't work. Same result as above – Haritos30 Oct 01 '19 at 12:18
https://codepen.io/saksija/pen/OJLerMV It is working. Did you even tried? – protestator Oct 01 '19 at 12:21
I clicked on your link and it's even worse. the 'teeeest' title is all the way to the right.I'm using chrome by the way. Same result in firefox as well – Haritos30 Oct 01 '19 at 12:26
Oh, I see, I misread your question. Try margin: 0 auto; It will take the same width from both side – protestator Oct 01 '19 at 12:35
Well at least that works in codepen (although not in my page for some strange reason). If you edit your answer i will accept it as correct. – Haritos30 Oct 01 '19 at 12:58
ok fixed it in my page as well – Haritos30 Oct 01 '19 at 13:18
There is one final problem with this solution. That is that the center element *begins* from the center and therefore it's not totally centrally aligned. – Haritos30 Oct 01 '19 at 13:49

CSS: Center align text while keeping other elements of the container to the left

1 Answers1