如何实现Flex容器内图片的居中对齐？

我当前的代码结构如下，外层是设置了display: flex的div容器，内部嵌套了.site-title-container容器，其中包含img标签与a标签：

<div style="display: flex;">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/Icon-32@3x.png">
    <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: ce... /* 未完成的属性 */
}

现需实现.site-title-container这个Flex容器内图片的居中对齐，请问该如何操作？

嘿，这个问题很好解决，咱们结合Flex布局的特性来调整就行，一步步来：

1. 移除冗余的float属性 #

既然.site-title-container已经设置了display: flex，float: left在这里完全起不到作用，反而可能干扰Flex布局的正常表现，直接把这行代码删掉就好。

2. 根据需求设置对齐属性 #

因为你是在Flex容器里调整图片的对齐，核心就是利用Flex的两个对齐属性：

• 垂直居中（和旁边的a标签对齐）：如果你的需求是让图片和右侧的a标签在垂直方向上居中对齐，给.site-title-container添加align-items: center即可。这个属性控制Flex容器交叉轴（默认是垂直方向）上的子元素对齐方式，能让图片和文字完美居中对齐。

  调整后的完整CSS如下：

  .site-title-container {
    display: flex;
    justify-content: flex-start; /* 保持元素靠左排列，符合你当前的布局需求；如果要水平居中可改为center */
    align-items: center; /* 关键属性：实现垂直居中 */
  }
  

• 完全居中（图片在容器内水平+垂直居中）：如果你的需求是让图片在.site-title-container容器内完全居中（比如后续移除a标签的场景），那除了align-items: center，还要把justify-content设置为center，这样图片就会在容器的正中央。

另外，你原来的justify-content: ce...记得补全哦，比如justify-content: flex-start是Flex布局的默认值，适合当前图片和a标签并排的场景。

这样调整后，就能轻松实现你想要的图片居中效果啦！

内容的提问来源于stack exchange，提问作者Vladyslav Zavalykhatko