为什么不能使用align-items = center中心图像正确弯曲方向列 [英] Why doesn't flex direction column with align-items=center center image properly

查看：63
本文介绍了为什么不能使用align-items = center中心图像正确弯曲方向列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我偶然发现了一个问题，该问题是在 direction:column 的Flexbox中居中放置图像.

I stumbled upon an issue with image centering within a flexbox with direction:column.

想象一下，Flexbox中有两个元素，其中第一个元素包含图像:

Imagine you have two elements within a flexbox, where the first one contains an image:

<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的中心.

I would expect the image to be center horizontally within the div, but it appears the left border of the image is exactly at the center of the div.

当我用包含某些文本的另一个div替换图像时，图像将按预期放置.

When I replace the image with another div which contains some text it is placed as expected.

有人可以向我解释那里发生了什么吗?

Can anybody explain to me whats happening there?

查看此小提琴

推荐答案

问题是您使用的是无内在尺寸且只有内在比例的SVG，就好像您的图片的宽度等于0，从而使其居中宽度也等于0的容器.

The issue is that you are using an SVG with no intrinsic dimension and only an intrinsic ratio so it's like your image has a width equal to 0 which make its centred container with a width equal to 0, too.

这里是在使用 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％后，图像将填满所有空间并保持其比例，但是由于浏览器不会再返回来计算容器的宽度，因此会产生溢出:

After setting height:100% the image will fill all the space and will keep its ratio but you will have an overflow because the browser will not go back to calculate the width of the container again:

.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 添加到使其收缩的容器

To avoid this give the image a width and make sure to add min-height:0 to the container to allow it to shrink

.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 即可避免溢出:

If you were initially using an image with intrinsic dimension you won't have this issue and you don't need to define a width. You will only need to add min-height:0 to avoid the overflow:

.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 来确保其在所有地方都相同:

Note that the above doesn't work the same way in Firefox and you will need to add text-aling:center to make sure it works the same everywhere:

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

You will notice that the difference is related to the width calculation of the container which a bit complex due to the use of height:100%

如果图像的尺寸很小，情况可能会变得更糟:

Things may get worse if the size of the image is very small:

.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容器

In Firefox text-align:center will do nothing and you may need a nested flexbox container

.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几乎可以解决的问题，可以使用相同的代码修复该问题，但它无法消除溢出:

The below is almost the same issue you were having with the initial SVG that can fixed with this same code but it won't remove the overflow:

.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％添加到容器中，则初始代码可能会正常工作，从而使嵌套高度的计算更加容易:

Another intresting thing to note is that your initial code may work fine if you add height:100% to the container making the calculation of the nested height easier:

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

这篇关于为什么不能使用align-items = center中心图像正确弯曲方向列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆