title: Center alignment of image inside flex
body: <p>I have <code>img</code> and <code>a</code> inside <code>div</code> with <code>display: flex</code>.<br> Looks like this:</p>
  
  <pre><code>&lt;div style="display: flex;"&gt;
    &lt;div class="site-title-container"&gt;
      &lt;img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/Icon-32@3x.png"&gt;  &lt;!-- width="34" height="34" --&gt;
      &lt;a class="site-title" rel="author" href="{{ " / " | relative_url }}"&gt;{{ site.title | escape }}&lt;/a&gt;
    &lt;/div&gt;
   //.....
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>   .site-title-container {
          float: left;
          display: flex;
          justify-content: center;
          align-content: center;
      }
  </code></pre>
  
  <p>Why can image still not be aligned to center? </p>