我有一个 Flex“行”，其中包含 5 个 Flex“单元格”，其中包含一个应该在中间对齐的图像。
它在 Chrome 和 Firefox 中完美运行，但在 IE 中却不行。它没有得到好的比例。换句话说，height:auto当图像位于 Flexbox 中时，在 IE 中不起作用。
我已经尝试了几件事，比如flex:none;对于图像或将图像包装在另一个图像中div。什么都不起作用。
我希望它具有良好的比例并且完全居中：
这是一个 jsFiddle：https://jsfiddle.net/z8op323f/5/ https://jsfiddle.net/z8op323f/5/
.grid-row {
width: 300px;
height: 300px;
display: flex;
margin: auto;
}
.grid-cell {
height: 100%;
width: 25%;
transition: box-shadow 2s;
display: flex;
}
img {
width: 60%;
margin: auto;
height: auto !important;
min-height: 1px;
}
.long {
width: 80%;
height: auto !important;
}
<div class="grid-row">
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
</div>
height: auto简单来说就是内容的高度。这是一个默认值；你不需要指定它。
如果您删除height: auto从您的代码来看，它不会改变任何内容（在任何浏览器中）。
从规格来看：10.5 内容高度：height财产 https://www.w3.org/TR/CSS22/visudet.html#the-height-property
问题似乎是margin: auto在 Chrome 和 FF 中受到尊重。但它在 IE 11/Edge 中（大部分）被忽略。
这可能是一个错误。众所周知，IE11 尤其具有许多flexbugs:
- https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
-
http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox（请参阅“已知问题”选项卡）
一个简单的跨浏览器解决方案是使用margin: auto相等的：
而不是弹性项目上的此代码：
img {
margin: auto;
}
在弹性容器上使用它：
.grid-cell {
display: flex;
justify-content: center;
align-items: center;
}
有关更多详细信息，请参阅此处的方框#56：https://stackoverflow.com/a/33856609/3597276 https://stackoverflow.com/a/33856609/3597276
修改后的小提琴 https://jsfiddle.net/z8op323f/7/
.grid-row {
width: 300px;
height: 300px;
display: flex;
margin: auto;
}
.grid-cell {
height: 100%;
width: 25%;
transition: box-shadow 2s;
display: flex;
justify-content: center; /* NEW */
align-items: center; /* NEW */
}
img {
width: 60%;
/* margin: auto; */
/* height: auto !important; */
min-height: 1px;
}
.long {
width: 80%;
/* height: auto !important; */
}
<div class="grid-row">
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
