flex内图像的中心对齐答案

【问题标题】：Center alignment of image inside flexflex内图像的中心对齐
【发布时间】：2023-11-26 02:42:01
【问题描述】：

我在div 和display: flex 中有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">  <!-- 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;
    }

为什么图片还是不能居中对齐？

【问题讨论】：

可以用自带的HTML/CSS/JS sn-p提供demo吗？
移除浮动
浮点数不适用于 felx-child
你到底想对齐什么？垂直的？ --> jsfiddle.net/b5js0wzs/5
它是align-items。它希望设置在parent 上。您拥有的所有styles。并保留float。 jsfiddle.net/dkcdszd8/7.

标签： html css flexbox centering

【解决方案1】：

为主 div 应用 justify-content:center。

.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/Icon-32@3x.png"> 
    <a class="site-title" rel="author" href="">{{ site.title | escape }}</a>
  </div>
</div>

【讨论】：

align-items: center 为* div 提供帮助。你能解释一下为什么它有效，但对于内部 div 无效？
因为你的内部 div 没有覆盖 100% 的宽度。您可以使用此解决方案或 @Paulie_D 解决方案。他的解决方案将使您的内部宽度为 100%。所以自动会起作用。
Why can image still not be aligned to center? 这就是你的问题。
垂直而不是水平。很抱歉一开始没有说清楚
问题出在align-content 而不是align-items。改变这有助于

【解决方案2】：

.site-title-container div 在变成 flex-child 时折叠到其内容的宽度

要使其扩展为全宽 (100%)，只需对其应用 flex:1。

.parent {
  display: flex;
}

.site-title-container {
  background: pink;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="http://www.placebacon.net/400/300">
    <a class="site-title" rel="author" href="Some-Link">Link</a>
  </div>
</div>

【讨论】：

正如我在 cmets 中对@Suresh Ponnukalai 的回答中提到的，它仅水平居中
已修复...检查一下。
对我来说太愚蠢了。我有align-content 而不是align-items。这首先是问题

【解决方案3】：

.site-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
   width: 100%;
}

【讨论】：

在 Stack Overflow 上添加解释为什么您的解决方案应该有效是一种很好的做法。更多信息请阅读How To Answer。