图像在 flex 中的中心对齐

Question

我在 div 中有 img 和 a 以及 display: flex。
看起来像这样：

<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;
    }

为什么图像仍然无法居中？

Answer 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>

Answer 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>

Answer 3

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

图像在 flex 中的中心对齐

Center alignment of image inside flex

html

css

centering

flexbox