Loading ...

Aligning Text Vertically in Buttons | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Aligning Text Vertically in Buttons
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Aligning Text Vertically in Buttons

Subscribe to RSS
  • mdrain

    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.

  • Foster

    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

  • mdrain

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

  • Foster
    Answered

    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

  • mdrain

    You are awesome and deserve a raise.

    Thank you.

  • raghav_khunger
    Answered

    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

  • mdrain

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

Page 1 of 1 (7 items)