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:
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>