4

I am trying to vertical align some text inside a flexbox container that has a min height and it works well except for in ie11, where the content is not centred. 

.banner {
  background:#ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction:column;
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
    <span>IE is bobbins</span>
</div>

I have had a look around and people who have had similar problems are suggesting that adding a height will fix the issue but obviously this negates the min-height so it's not very useful.

Does anyone know a way to get the vertical centring to work in ie with a min-height?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Pete
  • 57,112
  • 28
  • 117
  • 166
  • 1
    Just make the parent a flex container. See duplicate for details. [jsfiddle demo](https://jsfiddle.net/Ljbmp74q/1/) – Michael Benjamin Nov 08 '17 at 13:27
  • 1
    I tried that, it didn't seem to work perhaps it was the row thing that broke it (see one of the answers below). Seems to be a better solution than the table-cell hack if you want to answer – Pete Nov 08 '17 at 13:31
  • 1
    It is a cleaner and more efficient solution in my view. I closed the question as a duplicate, because the issue is addressed in detail in that post. – Michael Benjamin Nov 08 '17 at 13:33
  • You can also make it work with `flex-direction: row`, but you then need to add `flex-grow` to your content item. [revised demo](https://jsfiddle.net/Ljbmp74q/2/) – Michael Benjamin Nov 08 '17 at 13:35
  • 1
    Ah, nice thanks :) – Pete Nov 08 '17 at 13:36

2 Answers2

3

If you are open to detecting and applying different CSS to ie11, you could do something like the following:

fiddle

.banner {
  background: #ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction: column;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .banner span {
    display: table-cell;
    min-height: 60px;
    vertical-align: middle;
  }
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
  <span>IE is bobbins</span>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59
  • 1
    I was looking at an ie only hack using those media queries, looks like old school table-cell will be the best option – Pete Nov 08 '17 at 12:55
2

This fix by Chris Wright might be usefull: https://codepen.io/chriswrightdesign/pen/emQNGZ/

It's based on the idea to wrap flex-direction:column inside a flex-direction:row parent:

    .l-flex-parent {
      display:flex;
      flex-direction:row;

    }
holden
  • 1,721
  • 12
  • 19