Center alignment of image inside flex

Question

I have img and a inside div with display: flex.
Looks like this:

<div style="display: flex;">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/[email protected]">  <!-- width="34" height="34" -->
    <a class="site-title" rel="author" href="{{ " / " | relative_url }}">{{ site.title | escape }}</a>
  </div>
 //.....
</div>

CSS

   .site-title-container {
        float: left;
        display: flex;
        justify-content: center;
        align-content: center;
    }

Why can image still not be aligned to center?

Answer 1

Apply the justify-content:center for the main div.

.site-title-container {
    float:left; 
    display: flex;
    justify-content: center;
    align-items: center;
}

<div style="display: flex; justify-content:center">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/[email protected]"> 
    <a class="site-title" rel="author" href="">{{ site.title | escape }}</a>
  </div>
</div>