title: HTML Centered Title with Image Left Aligned
body: <p>How can I get an image aligned to the left corner of the page with a centered title?</p>
  <p><strong>What I tried:</strong></p>
  <pre><code>&lt;div style=&quot;display: flex; height: 100px;&quot;&gt;
      &lt;img style=&quot;max-width: 100%; max-height: 100%;&quot; src=&quot;static/totally_original_logo.jpg&quot; alt=&quot;totally original logo&quot;&gt;
      &lt;div style=&quot;text-align: center; margin: 0 auto;&quot;&gt;
          &lt;a href=&quot;foo.com&quot;&gt;Return to home&lt;/a&gt;
          &lt;h1&gt;My Title&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vndaT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vndaT.png" alt="screenshot" /></a></p>
  <hr />
  <pre><code>&lt;div style=&quot;display: flex; height: 100px; justify-content: center;&quot;&gt;
      &lt;img style=&quot;max-width: 100%; max-height: 100%;&quot; src=&quot;static/totally_original_logo.jpg&quot; alt=&quot;totally original logo&quot;&gt;
      &lt;div style=&quot;text-align: center;&quot;&gt;
          &lt;a href=&quot;foo.com&quot;&gt;Return to home&lt;/a&gt;
          &lt;h1&gt;My Title&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hohV2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hohV2.png" alt="enter image description here" /></a></p>
  <p><strong>What I want:</strong>
  <a href="https://i.stack.imgur.com/CHPmP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CHPmP.png" alt="enter image description here" /></a></p>