为什么不证明内容合理:中心在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>
我的目标是,当我transform
与rotate(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>
该height
和width
的div
和button
始终是相同的,但是是可定制的。
我尽可能不包装元素。
回答:
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