为什么 justify-content: center 在 IE 中不起作用? [英] Why doesn't justify-content: center work in IE?

问题描述

我有一个简单的 div，里面有一个按钮.justify-content: center; 在 Firefox 和 Chrome 上工作正常，但在 IE 11 上不工作:

#div {高度:200px；宽度:50px；边框:1px纯黑色；显示:弹性；弹性:0 0 自动；对齐项目:居中；对齐内容:居中；}#按钮 {高度:50px；宽度:200px；最小宽度:200px；边框:1px纯黑色；背景颜色:红色；}

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

我的目标是，当我将 transform 与 rotate(90deg) 或 rotate(270deg) 一起使用时，按钮将适合 div:

#div {高度:200px；宽度:50px；边框:1px纯黑色；显示:弹性；弹性:0 0 自动；对齐项目:居中；对齐内容:居中；}#按钮 {高度:50px；宽度:200px；最小宽度:200px；边框:1px纯黑色；背景颜色:红色；变换:旋转(90度)；}

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

div 和 button 的 height 和 width 始终相同，但可以自定义.

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

解决方案

IE11需要父级有flex-direction: column.

此示例旋转了您的按钮:

#div {高度:200px；宽度:50px；边框:1px纯黑色；显示:弹性；对齐项目:居中；对齐内容:居中；flex-direction: 列}#按钮 {高度:50px；宽度:200px；最小宽度:200px；边框:1px纯黑色；背景颜色:红色；变换:旋转(90度)；}

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

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>

这篇关于为什么 justify-content: center 在 IE 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！