IE flexbox vertical align center and min-height

user_1790982 0
Viewed 2557

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?

internet-explorer-11 flexbox internet-explorer css
2 Answers

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>

user_55616050
user_37125130
Related