为什么不能证明内容：在IE中心工作？ [英] Why doesn't justify-content: center work in IE?

问题描述

我有这个简单的div里面有一个按钮。 justify-content：center; 使用Firefox和Chrome可以正常工作，但在IE 11上无法正常工作： $ b

  #div {height：200px;宽度：50px;边框：1px纯黑色;显示：flex; flex：0 0 auto; align-items：center; justify-content：center;}＃button {height：50px;宽度：200px; min-width：200px;边框：1px纯黑色; < div id = redirect; / / 分区 > < button id =button> HELLO< / button>< / div>  

我的目标是当我使用 transform 和 rotate（90deg）或 rotate（270deg），该按钮可以放入div中a>：

#div {height：200px;宽度：50px;边框：1px纯黑色;显示：flex; flex：0 0 auto; align-items：center; justify-content：center;}＃button {height：50px;宽度：200px; min-width：200px;边框：1px纯黑色;背景颜色：红色; transform：rotate（90deg）;}

< div id = DIV > < button id =button> HELLO< / button>< / div>

div 高度和宽度 $ c>和按钮总是相同的，但可以自定义。

尽可能地，我不喜欢包装元素。

解决方案

IE11需要父级拥有 flex-direction：column



这个例子有你的按钮旋转：



#div {height ：200px;宽度：50px;边框：1px纯黑色;显示：flex; align-items：center; justify-content：center; flex-direction：column} #button {height：50px;宽度：200px; min-width：200px;边框：1px纯黑色;背景颜色：红色; transform：rotate（90deg）;}

< div id = DIV > < button id =button> HELLO< / button>< / div>

I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
}

<div id="div">
  <button id="button">HELLO</button>
</div>

My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>

The height and width of the div and button are always the same, but are customizable.

As much as possible, I prefer not wrapping elements.

解决方案

IE11 needs the parent to have flex-direction: column.

This example has your button rotated:

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>

这篇关于为什么不能证明内容：在IE中心工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！