How to position an element inside the parent without using absolute

Question

I am trying to make a simple header for my webpage but I want to position my back button inside my div container such that it floats left but at the same time the "Header" text should appear in the center of the "parent div".
I tried using float left on my button but the problem is it makes the header text to wrap and the text appears off from the center of div(shifted right). So, I tried using flex and arrived at the following code:

<div class="container"> 
    <h2 class="alert alert-primary d-flex flex-column">
        <button class="btn btn-primary align-self-start">
            Go back
        </button>
        <div class="align-self-center">
            Header
        </div>  
    </h2>
</div>

Using flex, the header appears like this:

But here, I want the button and header to be positioned besides each other. Hence, the text must be shifted up somehow.

Can someone suggest some better alternative to this approach or how this one can be fixed?

Answer 1

I understand that you want to have the button on the left of the "Header" text, making the parent as having center text-align and putting the button inside the Header div and making it float:left ensures that the Heading div is not going to block align.

Also, please note that background-color:red; and background-color:green; are just to demo how is appears

.container{
  background-color:red;
  text-align:center;
}
.align-self-center{
  background-color:green;
}
button{
  float:left
}

<div class="container"> 
    <h2 class="alert alert-primary d-flex flex-column">
       
        <div class="align-self-center">
           <button class="btn btn-primary align-self-start">
            Go back
        </button>
            Header
        </div>  
    </h2>
</div>