I'm in the process of creating a basic header for my website, and I'm looking to place my back button inside a div container with it floating to the left. However, I also want the "Header" text to be centered within the parent div.
I initially attempted to use the float left property on my button, but this caused the header text to wrap, pushing it off-center to the right. To resolve this issue, I experimented with flexbox and came up with 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 flexbox, the header now appears as shown:
However, I'd like the button and header to be positioned next to each other. This would require adjusting the text alignment.
If anyone has a better alternative to this solution or suggestions on how to improve this one, please share your insights.