為什么使用 align-items=center center 圖像不能正確彎曲方向列

Question

我偶然發現了 flexbox 中的圖像居中問題， direction:column 。

假設您在 flexbox 中有兩個元素，其中第一個包含圖像：

<div class="container">
    <div class="image-container">
        <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
    </div>
    <div class="another-flex-child">
        Random content here
    </div>
</div>


.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;

  .image-container {
    flex: 1;
    align-self: center;

    .img {
      height: 100%;
    }
  }

  .another-flex-child {
    flex: none;
    background-color: red;
  }
}

我希望圖像在 div 內水平居中，但看起來圖像的左邊框正好位於 div 的中心。

當我用另一個包含一些文本的 div 替換圖像時，它按預期放置。

誰能向我解釋那里發生了什么？

簽出這個小提琴

Answer 1

因為您的<div>包含圖像（並在其上具有align-self: center ）默認情況下是塊級元素，默認情況下width為100% 。 因此，它相對於parent受到限制。

為了使您的圖像正確居中，您需要添加display: contents ：

container .image-container {
  display: inline;
}

這可以在下面看到：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.container.image-container { flex: 1; align-self: center; display: contents; }.container.image-container.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

Answer 2

問題是您使用的 SVG 沒有固有尺寸，只有固有比率，因此就像您的圖像的寬度等於 0，這使得其居中容器的寬度也等於 0。

這是在使用height:100%之前

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; }.img { /*height: 100%;*/ }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

設置height:100%后，圖像將填充所有空間並保持其比例，但您將有溢出，因為瀏覽器不會 go 重新計算容器的寬度：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" > </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

為避免這種情況，請給圖像一個寬度，並確保將min-height:0添加到容器中以使其縮小

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; min-height:0; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" width="250"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

---

如果您最初使用的是具有內在尺寸的圖像，則不會遇到此問題，也無需定義寬度。 您只需要添加min-height:0即可避免溢出：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; min-height:0; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://picsum.photos/id/1/400/400"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

請注意，以上在 Firefox 中的工作方式不同，您需要添加text-aling:center以確保它在任何地方都相同：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; text-align:center; min-height:0; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://picsum.photos/id/1/400/400"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

您會注意到差異與容器的寬度計算有關，由於使用了height:100% ，因此有點復雜

如果圖像的尺寸非常小，情況可能會變得更糟：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; text-align:center; min-height:0; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://picsum.photos/id/1/50/50"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

在 Firefox text-align:center什么都不做，你可能需要一個嵌套的 flexbox 容器

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; justify-content:center; border:2px solid blue; display:flex; min-height:0; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://picsum.photos/id/1/50/50"> </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

下面的問題與最初的 SVG 幾乎相同，可以使用相同的代碼進行修復，但不會消除溢出：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; display:flex; justify-content:center; border:2px solid blue; }.img { height: 100%; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" > </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

---

需要注意的另一件有趣的事情是，如果您將height:100%添加到容器中，從而使嵌套高度的計算更容易，您的初始代碼可能會正常工作：

 .container { height: 300px; background-color: green; display: flex; flex-direction: column; }.image-container { flex: 1; align-self: center; border:2px solid blue; box-sizing:border-box; height:100%; }.img { height: 100%; display:block; }.another-flex-child { flex: none; background-color: red; }.spacer { height: 20px; }

 <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" > </div> <div class="another-flex-child"> Random content here </div> </div> <div class="spacer"></div> <div class="container"> <div class="image-container"> <div>Properly centered content</div> </div> <div class="another-flex-child"> Random content here </div> </div>

Answer 3

添加 justify-content，如下所示：

.image-container {
    flex: 1;
    align-self: center;
    justify-content:center;
}

它應該有效