0

I am trying to get elements horizontally aligned in the center of a column, using a flexbox. It all works fine in Chrome but the items with position: absolute do not center in IE11. Thanks!

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.not_centered{
  position: absolute;
  flex: 1;
}
<div id="container">
  <div class="not_centered">
  text
  </div>
  <div class="not_centered">
  text 2
  </div>
  <br>
  <div class="centered">
    centered
  </div>
</div>

jsfiddle

Peter Somers
  • 1
  • 2
  • That is because IE11 responds differently to `flexbox`. Check this: http://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html – AndrewL64 Apr 20 '17 at 19:53
  • doesn't look vertical aligned on chrome too ... can you add screenshots of actual vs expected and chrome vs IE ... Also which relation do you want between flexbox and absolute position ? – DaniP Apr 20 '17 at 19:53
  • @AndrewLyndem thanks but none of those seem to work either – Peter Somers Apr 20 '17 at 19:57
  • 2
    That's because IE stinks in every way shape and form. – NathanielSantley Apr 20 '17 at 19:59
  • What are you trying to achieve? Absolutely positioned elements are removed from flex layout, so you can't use flex properties on them anyway, except in a few rare cases. – Michael Benjamin Apr 20 '17 at 20:00
  • @DaniP I can't add the links to the question, since apparently that takes more "reputation" than I have. Here's what it looks like in Chrome: https://i.stack.imgur.com/MFSGq.png And here's what it looks like in ie11: https://i.stack.imgur.com/nlI73.png – Peter Somers Apr 20 '17 at 20:03
  • @Michael_B all I would like is for it to appear the same in IE as it does in Chrome (if only I had a dollar for every time I've said that...) – Peter Somers Apr 20 '17 at 20:04
  • Here you go: https://jsfiddle.net/32p7jsLx/10/ – Michael Benjamin Apr 20 '17 at 20:08
  • Awesome, thanks. If you post that as an answer I'll accept it! – Peter Somers Apr 20 '17 at 20:11
  • Aaaa well that's Horizontal alignment ... I don't have IE xd – DaniP Apr 20 '17 at 20:12
  • @DaniP this isn't a duplicate of that question... I'm asking specifically why flexbox behavior is inconsistent – Peter Somers Apr 20 '17 at 21:31

0 Answers0