justify-content and align-items using center seems to not be working in IE 11. In other browsers it works just as I would expect. Does anybody know a workaround?
.box {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.score-wrapper {
align-items: center;
display: flex;
justify-content: center;
min-height: 280px;
}
.overlay-circle {
border-radius: 100px;
border: 1px solid red;
fill: transparent;
height: 200px;
position: absolute;
width: 200px;
}
.center-circle {
border-radius: 90px;
border: 1px solid blue;
height: 180px;
position: absolute;
width: 180px;
}
<div class="box">
<div class="score-wrapper">
<div class="overlay-circle"></div>
<div class="center-circle">
<div class="score">
<p>800</p>
<p>Excellent</p>
</div>
</div>
</div>
Flexbox is pretty buggy when it comes to IE per CanIUse, 2 of which that are mentioned:
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
IE 11 does not vertically align items correctly when min-height is used see bug
This being said, add explicit heights as a fallback on .score-wrapper for IE11.
.box {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.score-wrapper {
align-items: center;
display: flex;
justify-content: center;
min-height: 280px;
height: 280px;
}
.overlay-circle {
border-radius: 100px;
border: 1px solid red;
fill: transparent;
height: 200px;
position: absolute;
width: 200px;
}
.center-circle {
border-radius: 90px;
border: 1px solid blue;
height: 180px;
position: absolute;
width: 180px;
}
Related
I've been trying to get familiar with grid while making the sidebar, and I encountered the problem where my grid items/children aren't equal to each-other in height even though they're supposed to be the same size.
* {
margin: 0;
padding: 0;
}
.mainContainer {
height: 500px;
gap: 30px;
display: grid;
grid-row-template: repeat(auto-fill, 1fr);
background-color: black;
color: white;
justify-items: center;
align-items: start;
}
.mainContainer div {
display: grid;
align-content: center;
justify-content: center;
width: 60%;
border: 1px solid yellow;
height: 60%;
border-radius: 10px;
}
.mainContainer img {
height: 50%;
width: 100%;
object-fit: contain;
}
<div class="mainContainer">
<div> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"> </div>
<div> Box 1 </div>
<div> Box 2 </div>
<div> Box 3 </div>
</div>
Focusing on the image
.mainContainer img{
height: 30px; // set it to any size
object-fit: contain;
}
I think you should use px instead of %
You can use this, it is done without grid, but with a flex-column.
* {
margin: 0;
padding: 0;
}
.mainContainer{
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
background-color: black;
color: white;
}
.mainContainer > * {
height: 25%;
width: 60%;
border: 1px solid yellow;
/* center image / text in children boxes */
display: flex;
justify-content: center;
align-items: center;
}
.mainContainer img {
object-fit: contain;
}
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
Size of the first level header (in grey background) is growing in size as per the size of the largest flex item in case of edge browser. While in case of chrome it is honouring fit-content width and is being rendered accordingly.
HTML:
<section id = 'tileContainer' class = 'tileContainer'>
<div id = 'leftSideContent' class = 'leftSideContent'>
<div id = 'firstLevelHeader' class = 'firstLevelHeader'>
First Level Header
</div>
<div id = 'secondLevelHeader' class = 'secondLevelHeader'>
Second level header has a got a very long text inside of it
</div>
</div>
<div id = 'rightSideContent' class = 'rightSideContent'>
X
</div>
</section>
CSS:
.tileContainer{
margin: 25px;
height: 120px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid black;
border-radius: 5px;
box-shadow: solid 0.2px #d2d3d3;
.leftSideContent {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.firstLevelHeader{
background-color: #8a8a8a;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
height: 20px;
align-content: center;
width: fit-content;
}
.secondLevelHeader {
height: 20px;
}
}
.rightSideContent{
justify-content: center;
width: 50px;
}
}
Behavior in edge:
Behavior in Chrome:
From your description, it seems that you're using Edge Legacy. width: fit-content is not supported by Edge Legacy but supported by Edge Chromium, you could check it on caniuse.
One alternative is to use display: table, which has the same effect as width: fit-content:
.tileContainer {
margin: 25px;
height: 120px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid black;
border-radius: 5px;
box-shadow: solid 0.2px #d2d3d3;
}
.tileContainer .leftSideContent {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.tileContainer .leftSideContent .firstLevelHeader {
background-color: #8a8a8a;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
height: 20px;
align-content: center;
width: fit-content;
display: table; /*add this line*/
}
.tileContainer .leftSideContent .secondLevelHeader {
height: 20px;
}
.tileContainer .rightSideContent {
justify-content: center;
width: 50px;
}
<section id='tileContainer' class='tileContainer'>
<div id='leftSideContent' class='leftSideContent'>
<div id='firstLevelHeader' class='firstLevelHeader'>
First Level Header
</div>
<div id='secondLevelHeader' class='secondLevelHeader'>
Second level header has a got a very long text inside of it
</div>
</div>
<div id='rightSideContent' class='rightSideContent'>
X
</div>
</section>
width: fit-content is not supported on Edge. you can find out more here
you can use display: table as an alternative. works the same way.
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>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.
I have a flex item that is also a flex container .sub-con, problem is the flex item of .sub-con is refusing to wrap, even after adding : flex-flow: row wrap.
Can anyone fix this for me, or point out what I'm doing wrong.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
height: 100px;
border: 1px solid lightgreen;
flex-grow: 2;
}
.col-two {
height: 100px;
border: 1px solid red;
flex-grow: 1;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>
Your flex items in the nested container are sized with percentages.
.col-one{
width: 40%;
height: 100px;
border: 1px solid lightgreen;
}
.col-two{
width: 40%;
height: 100px;
border: 1px solid red;
}
Because percentage lengths are based on the length of the parent they have no reason to wrap. They will always be 40% of the parent, even if the parent has a width of 1%.
If you use other units for length, such as px or em, they will wrap.
jsFiddle demo
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
flex: 1; /* for demo only */
align-content: flex-start; /* for demo only */
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
width: 200px;
height: 100px;
border: 1px solid lightgreen;
}
.col-two {
width: 200px;
height: 100px;
border: 1px solid red;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>