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.
Please enable JavaScript to use file uploader.
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.
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.
min-height
align-items: center
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.
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.
Choose a location
Forum :