Your problem may be because IE needs a height on the elements to know how to vertically align the content of that block. You could solve it simply by setting a height to the element and I think that with that you would have it ready.
.block { display: flex; align-items: center; min-height: 80px; padding: 0 20px; height: 200px; }
The problem is that you can’t mark the height of the elements, in which case you may have to look for other alternatives for vertical alignment. There it depends on your specific case and how the container where you are placing the elements is.
Just by simply playing with the padding-top, you could give it a distance from the top that would simulate that vertical alignment. Perhaps, as a suggestion, you could forget about that problem and the padding thing may not be such a negative thing, if what it is about is that things do not stick to the top of your container.
Depends on which version of IE you’re targeting, or just Edge. I guess flexbox works better on edge. Older Microsoft browsers can’t be expected to fix these bugs anymore.
Facebook Comments
Disqus