Question

我img a内div 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

将justify-content:center应用于主div。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

要将其扩展到全宽（100％），只需将flex:1应用到它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

flex

3 个答案: