HTML Centered Title with Image Left Aligned

Question

How can I get an image aligned to the left corner of the page with a centered title?

What I tried:

<div style="display: flex; height: 100px;">
    <img style="max-width: 100%; max-height: 100%;" src="static/totally_original_logo.jpg" alt="totally original logo">
    <div style="text-align: center; margin: 0 auto;">
        <a href="foo.com">Return to home</a>
        <h1>My Title</h1>
    </div>
</div>

---

<div style="display: flex; height: 100px; justify-content: center;">
    <img style="max-width: 100%; max-height: 100%;" src="static/totally_original_logo.jpg" alt="totally original logo">
    <div style="text-align: center;">
        <a href="foo.com">Return to home</a>
        <h1>My Title</h1>
    </div>
</div>

What I want:

Answer 1

Keep justify-content: center on the div tag and give the img a justify-self: start property. You may need to give the div a width of 100% as well.

img {
justify-self: start;
}
div {
width: 100%;
}