Aligning Text Vertically in Buttons | Communifire Support

Could someone help me figure out why the below code centers text vertically (as desired) in Chrome but not in Internet Explorer?

<a href="#" 
    style="box-sizing: border-box;
    transition: box-shadow 0.3s ease-in-out; border: none;
    border-radius: 5px;display: flex;
    flex-direction: column; justify-content: center;
    background-image: none; background-color: #005295; color: #fff;
    min-height: 65px;"
    class='btn btn-block btn-large'>
    <span style="font-size: 17.5px;">This Is a Test Label</span>
</a>

It's been driving me crazy.

Hi Maxwell,

Where do you currently have this code written? I am happy to take a look at why it is not working.

Thanks,
Foster

Thank you, Foster. Please see /spaces/82/leadership-management-resources/home-cloned on our site.

Hi Maxwell,

I think I found a solution to your issue. It turns out, there is a bug with min-height breaking align: center in IE11.

Bug: Setting min-height breaks align-items: center in ie11. You can set height explicitly, but in some situations you want min-height not height.

Workaround: Setting height to a value less then min-height fixes the align-items: center issue in IE11, but the container still sets its size based on min-height, effectively giving you the desired behavior.

As a solution, I added a Height : 64px; to your code. This fixed the issue in IE11. Below is the full code you can use. 

<a href="#" 
    style="box-sizing: border-box;
    transition: box-shadow 0.3s ease-in-out; border: none;
    border-radius: 5px;display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: none;
    background-color: #005295;
    color: #fff;
    min-height: 65px;
    height : 64px;"
    class='btn btn-block btn-large'>
    <span style="font-size: 17.5px;">This Is a Test Label</span>
</a>

Before :

After :

I hope this helps,
Foster

You are awesome and deserve a raise.

Thank you.

Hi Maxwell,

The other solution would be to detect IE via CSS:

https://jsfiddle.net/hL3oyc20/2/

HTML:

 

<a href="#" 
    class='btn btn-block btn-large my-class'>
    <span style="font-size: 17.5px;">This Is a Test Label</span>
</a>

CSS:

 

.my-class {
      box-sizing: border-box;
      transition: box-shadow 0.3s ease-in-out; border: none;
      border-radius: 5px;display: flex;
      flex-direction: column;
    
       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;
       
      background-image: none;
      background-color: #005295;
      color: #fff;
      min-height: 65px;
}


/* For IE **/
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .my-class span {
    display: table-cell;
    min-height: 65px;
    vertical-align: middle;
  }
}

Thanks,
Raghav

Thanks, Raghav! And I dig the JSFiddle code playground.