how to place element left without moving middle (text-) element

Question

I am trying to build a logout button into my website, it should be on the left side in the containing <div>. I am trying to build it in an upper <div> that contains some text, that should not be moved away from the middle. So how do I solve this problem (is there maybe a way without using position: absolute

.text-center {
  text-align: center;
}

<div class="text-center">
  <button>Logout</button>
  Title
 </div>

What you want? Button in center – Uttam Nath Jun 17 '22 at 18:13 — Uttam Nath, Jun 17 '22 at 18:13
explain what you want plz – Vahid Alimohamadi Jun 17 '22 at 18:21 — Vahid Alimohamadi, Jun 17 '22 at 18:21

score 0 · Answer 1 · answered Jun 17 '22 at 18:39

Do you mean something like this?

.appBar {
  background-color: teal;
  display: flex;
  justify-content: 'space-around';
  align-items: 'center';
  height: 2.5rem;
}

.titleSection, .actionSection {
   display: flex;
   align-items: center;
   justify-content: center;
}

.titleSection {
  flex-grow:1;
}

<div class="appBar">
  <div class="titleSection">
    Title
  </div>
  <div class="actionSection">
    <button>Logout</button>
  </div>
</div>

sorry not quite as the Title is slightly shifted off the middle. — Cyberguy Game, Jun 17 '22 at 22:55

how to place element left without moving middle (text-) element

1 Answers1