Question

我试图将图像放在div中。它应该居中。 div应该具有最小宽度，并且只有在图像下方的文本需要时才会增长。

以下代码演示了Chrome中我想要的内容：

＆＃13;

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    min-height: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

＆＃13;

<img src="http://placehold.it/40x40">
<div class="loading-spinner-overlay-1">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
    </div>
  </div>
</div>

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
      <p>
      Some long text
      </p>
    </div>
  </div>
</div>

＆＃13;

然而，在IE11中，它看起来像这样：

我做错了吗？或者这是IE11中的错误吗？

我该怎么做才能解决这个问题？

我已尝试在max-width: 100%标记上设置flex-shrink:0和img，因为谷歌的一些结果显示，但这并没有帮助。

Answer 1

更新

将align-items: flex-start添加到loading-spinner-container可修复此问题，这是有道理的，因为align-items默认为stretch并且跨轴（在本例中为水平）弯曲列方向。

已更新，第二次修订

此外，要修复垂直居中，并且由于IE11在min-height时再次出现问题，请从flex-direction: column移除loading-spinner-background并将min-height: 100px移至{ {1}}。

Stack snippet

＆＃13;

loading-spinner-container

＆＃13;

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    /* flex-direction: column;                  removed  */
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    min-height: 60px;                       /*  added/value changed (moved from *-background class)  */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;                /*  added  */
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

＆＃13;

也可以使用<img src="http://placehold.it/40x40"> <div class="loading-spinner-overlay-1"> <div class="loading-spinner-background"> <div class="loading-spinner-container"> <img src="http://placehold.it/40x40"> </div> </div> </div> <div class="loading-spinner-overlay-2"> <div class="loading-spinner-background"> <div class="loading-spinner-container"> <img src="http://placehold.it/40x40"> <p> Some long text </p> </div> </div> </div>，如果与align-items: center合并，您可以将justify-content: center放在margin: auto上。

Fiddle demo

根据评论更新，第3次修订

较长的文字似乎没有包裹在IE上。

如this post所示，IE需要在flex项目上明确设置宽度，此处为img，并且p也是flex 列 item（对于行项目loading-spinner-container就足够了），它也需要一个（或flex-grow）。

Fiddle demo

Answer 2

试试这个：

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <div class="img-container">  <!-- added this -->
        <img src="http://placehold.it/40x40">
        <p>
            Some long textwrwerwer
        </p>
      </div>
    </div>
  </div>
</div>

然后添加了新课程：

.loading-spinner-container .img-container {
  clear:both;
  text-align:center;
}

基本上我添加了一个包装div。

希望它有所帮助。

在flexbox中IE11中的图像大小调整不正确

2 个答案: