为什么不证明内容合理:中心在IE中起作用?

我有一个简单的div,里面有一个按钮。justify-content:center;使用Firefox和Chrome可以正常工作,但不适用于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>

我的目标是,当我transformrotate(90deg)或一起使用时rotate(270deg),该按钮将适合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>

heightwidthdivbutton始终是相同的,但是是可定制的。

我尽可能不包装元素。

回答:

IE11需要父母拥有flex-direction: column

此示例旋转了按钮:

#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中起作用? 的全部内容, 来源链接: utcz.com/qa/401864.html

回到顶部